Difference between revisions of "Template:Northeastern Boston/CSS"

 
(102 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<style>
 
<style>
−
@import url('http://fonts.googleapis.com/css?family=Montserrat:400,700');
 
−
@import url('http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css');
 
 
@import url('http://fonts.googleapis.com/css?family=Montserrat:400,700');
 
@import url('http://fonts.googleapis.com/css?family=Montserrat:400,700');
 
@import url('http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css');
 
@import url('http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css');
Line 25: Line 23:
 
   overflow-x: hidden;
 
   overflow-x: hidden;
 
}
 
}
 +
 +
/* Width and height settings */
 +
 +
#globalWrapper {
 +
  width: 100%;
 +
  height: 100%;
 +
}
 +
 +
#bodyContent {
 +
  width: 100%;
 +
}
 +
 +
 +
 +
  
 
/* Fixing previously installed css -_- */
 
/* Fixing previously installed css -_- */
Line 33: Line 46:
 
#content {
 
#content {
 
   width: 100%;
 
   width: 100%;
−
   min-height: 100%;
+
   height: 100%;
 
   border: 0px;
 
   border: 0px;
 
   background-color: transparent;
 
   background-color: transparent;
 
   margin: 0px;
 
   margin: 0px;
 +
  margin-top: -48px;
 
   padding: 0px;
 
   padding: 0px;
 +
  line-height: normal;
 
}
 
}
  
Line 53: Line 68:
 
p {
 
p {
 
   margin: 0 0 0 0;
 
   margin: 0 0 0 0;
 +
}
 +
 +
#bars_item img {
 +
  margin: 0 0 0 15px;
 
}
 
}
 
/***************************************/
 
/***************************************/
Line 59: Line 78:
 
   height: 100%;
 
   height: 100%;
 
   clear: both;
 
   clear: both;
 +
  display: flex;
 
}
 
}
  
Line 70: Line 90:
 
.content {
 
.content {
 
   float: left;
 
   float: left;
 +
  width: 100%;
 
   min-height: 100%;
 
   min-height: 100%;
 
   margin-left: 17rem;
 
   margin-left: 17rem;
Line 103: Line 124:
 
   border-bottom: 1px solid #222;
 
   border-bottom: 1px solid #222;
 
   background: #2a2a2a;
 
   background: #2a2a2a;
 +
}
 +
 +
.Notebook {
 +
  width: 100%;
 +
  background-color: white;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  padding: 0 15%;
 +
  overflow: auto;
 +
}
 +
 +
.nav li {
 +
  border-top: 2px solid #464646;
 
}
 
}
  
Line 121: Line 155:
 
   left: 20px;
 
   left: 20px;
 
}
 
}
 +
 +
#a-home:before { content: '\f00a'; }
  
 
.nav li:nth-child(1) a:before { content: '\f00a'; }
 
.nav li:nth-child(1) a:before { content: '\f00a'; }
Line 142: Line 178:
 
   box-shadow: inset 5px 0 0 #5b5, inset 6px 0 0 #222;
 
   box-shadow: inset 5px 0 0 #5b5, inset 6px 0 0 #222;
 
   background: #444;
 
   background: #444;
−
   z-index: -1;
+
   /*z-index: -1;*/
 
}
 
}
  
Line 154: Line 190:
  
 
h2 {
 
h2 {
−
   font-size: 18px;
+
   font-size: 2rem;
 
   font-weight: 400;
 
   font-weight: 400;
 
   color: #999;
 
   color: #999;
 +
}
 +
 +
h3 {
 +
font-size: 1.5rem;
 +
font-weight: 325;
 
}
 
}
  
Line 165: Line 206:
  
 
p {
 
p {
−
  font-family: 'aktiv grotesk', Montserrat;
 
 
   font-size: 1.5rem;
 
   font-size: 1.5rem;
 
   line-height: 2.8rem;
 
   line-height: 2.8rem;
Line 190: Line 230:
  
 
.slide {
 
.slide {
−
   height: 100%;
+
   min-height: 100%;
 
   width: 100%;
 
   width: 100%;
 +
 +
  display: -webkit-box;
 +
  display: -moz-box;
 +
  display: -ms-flexbox;
 +
  display: -webkit-flex;
 +
  display: flex;
 +
 +
  -webkit-align-items: center;
 +
  align-items: center;
 +
 +
  -webkit-justify-content: center;
 +
  justify-content: center;
 
}
 
}
  
 
#slide1 {
 
#slide1 {
−
   background-color: #AE4F93;
+
   background-color: #4FAE98;
 
}
 
}
  
 
#slide2 {
 
#slide2 {
−
   background-color: #FF9900;
+
   background-color: #f9f9f9;
 
}
 
}
  
 
#slide3 {
 
#slide3 {
−
   background-color: #800F25;
+
   background-color: #292929;
 
}
 
}
  
 
#slide4 {
 
#slide4 {
−
   background-color: #2B364A;
+
   background-color: white;
 
}
 
}
  
 
#logo {
 
#logo {
−
   height: 9rem;
+
   height: 14rem;
 
   margin-top: 0;   
 
   margin-top: 0;   
 
   margin-bottom: 0;
 
   margin-bottom: 0;
 +
  display: block;
 +
  margin: auto;
 
}
 
}
  
 
#project_header {
 
#project_header {
−
  margin-top: 1rem;
 
−
  margin-bottom: 2rem;
 
 
   text-align: center;
 
   text-align: center;
−
  border-bottom: 1px solid #111;
 
 
   padding-bottom: 2rem;
 
   padding-bottom: 2rem;
 +
  font-size: 4rem;
 +
  font-weight: 700;
 +
  margin: 5rem 0 5rem;
 +
}
  
 +
#home-header {
 +
  text-align: center;
 +
  padding-bottom: 2rem;
 +
  font-size: 3rem;
 +
  font-weight: 700;
 +
  margin: 5rem 0 5rem;
 +
  color: white;
 +
border-bottom: none;
 
}
 
}
  
 
#project_description {
 
#project_description {
−
   margin-top: 1rem;
+
  width: 100%;
 +
  background-color: white;
 +
   margin-left: auto;
 +
  margin-right: auto;
 +
  padding: 0 11%;
 +
  overflow: auto;
 
}
 
}
  
 +
#project_description__p__one {
 +
  margin-bottom: 1.5rem;
 +
}
 +
 +
.tab-container {
 +
  width: 100%;
 +
  background-color: rgb(60, 119, 173);
 +
  color: white;
 +
  cursor: pointer;
 +
  border-radius: 5px;
 +
  margin-bottom: 20px;
 +
}
 +
 +
.tab-hide:hover {
 +
  border: 1px solid rgb(60, 119, 173);
 +
  box-shadow: 4px 5px 13px #888888;
 +
  margin-left: 2px;
 +
}
 +
 +
.tab-container  > iframe {
 +
  display: none;
 +
  width: 100% !important;
 +
  height: 1240px !important;
 +
  border: none !important;
 +
}
 +
 +
.tab-container__title {
 +
  margin-left: 30px;
 +
  line-height: 50px;
 +
}
 +
 +
.tab-container__arrow {
 +
  color: white;
 +
  height: 36px;
 +
  width: 33px;
 +
  font-size: 1.5em;
 +
  float: right;
 +
  margin-right: 22px;
 +
  margin-top: 5px;
 +
  right: 0px;
 +
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
 +
  background-size: contain;
 +
}
 +
 +
.nav-container__arrow {
 +
  color: white;
 +
  height: 22px;
 +
  width: 22px;
 +
  font-size: 1.5em;
 +
  float: right;
 +
  margin-top: -6px;
 +
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
 +
  background-size: contain;
 +
  background-repeat: no-repeat;
 +
  background-position: center center;
 +
}
 +
 +
.tab-show {
 +
  box-shadow: 0px 2px 13px #CCC;
 +
  border: none;
 +
}
 +
.tab-show > iframe {
 +
  display: block;
 +
}
 +
 +
.flip-vertical {
 +
  -moz-transform: scaleY(-1);
 +
  -webkit-transform: scaleY(-1);
 +
  -o-transform: scaleY(-1);
 +
  transform: scaleY(-1);
 +
  -ms-filter: flipv; /*IE*/
 +
  filter: flipv;
 +
}
 +
 +
 +
#humanpractices {
 +
margin: 5rem 0 5rem;
 +
  font-size: 4rem;
 +
  font-weight: 700;
 +
}
 +
 +
#outbreakgif {
 +
display: block;
 +
margin: 1rem auto !important;
 +
}
 +
 +
#outbreakgifdesc {
 +
margin: 1rem auto !important;
 +
}
 +
 +
/* Sub nav */
 +
 +
.sub-nav__container {
 +
  cursor: pointer;
 +
}
 +
 +
.sub-nav__parent .flip-vertical {
 +
  margin-top: 0px;
 +
}
 +
 +
.sub-nav__children {
 +
  border-top: 2px solid #909090;
 +
  border-bottom: 2px solid #909090;
 +
}
 +
 +
.sub-nav__child {
 +
  background-color: #505050;
 +
  border-top: none! important;
 +
}
 +
 +
.sub-nav__child a:hover {
 +
  /*background-color: red !important;*/
 +
}
 +
 +
.sub-nav__child a:before { content: none !important;}
 +
/*
 +
.sub-nav__parent a:after {
 +
  content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
 +
  height: 20px;
 +
  width: 20px;
 +
  background-size: contain;
 +
}*/
 +
 +
.hidden {
 +
  display: none;
 +
}
 +
 +
/* Page Header */
 +
.page-header {
 +
  height: 400px;
 +
  overflow: hidden;
 +
  background-attachment: fixed;
 +
  background-size: contain;
 +
}
 +
 +
.page-header__title {
 +
  text-align: center;
 +
  font-size: 4rem;
 +
  font-weight: 700;
 +
  top: 52px;
 +
  color: white;
 +
  width: 100%;
 +
  margin-top: 125px;
 +
}
 +
 +
#page-header__project {
 +
background-image: url(https://static.igem.org/mediawiki/2015/d/d1/IGEM_Algae_500.jpg);
 +
}
 +
 +
#page-header__collaboration {
 +
background-image: url(https://static.igem.org/mediawiki/2015/c/cb/Panoramic_Boston_iGEM_collabs.jpg);
 +
}
 +
 +
#page-header__notebook {
 +
  background-image: url(https://static.igem.org/mediawiki/2015/c/c6/All_Gizah_Pyramids_igem1.jpg);
 +
}
 +
 +
#page-header__measurement {
 +
  background-image: url(https://static.igem.org/mediawiki/2015/2/23/18555343938_9a33828b03_o.jpg);
 +
}
 +
 +
#page-header__safety {
 +
  background-image: url(https://static.igem.org/mediawiki/2015/6/68/Chlamydomonas2-4.jpg);
 +
}
 +
 +
#page-header__outreach {
 +
  background-image: url(https://static.igem.org/mediawiki/2015/7/73/Earth-space_igem_2015.jpg);
 +
}
 +
 +
#page-header__opensource {
 +
  background-image: url(https://static.igem.org/mediawiki/2015/5/50/A_typewriter_%2810995863465%29_copy.jpg);
 +
}
 +
 +
#page-header__protocols {
 +
background-image: url(https://static.igem.org/mediawiki/2015/1/14/Sea-water-ocean-waves.jpg);
 +
margin-left="200px";
 +
}
 +
 +
#page-header__workflow {
 +
background-image: url(https://static.igem.org/mediawiki/2015/c/c6/All_Gizah_Pyramids_igem1.jpg);
 +
}
 +
 +
#a-home:before { content: '\f00a'; }
 +
 +
#a-team:before { content: '\f1ae'; }
 +
 +
#a-project:before { content: '\f135'; }
 +
 +
#a-parts a:before { content: '\f085'; }
 +
 +
#a-notebook a:before { content: '\f02d'; }
 +
 +
#a-attributions:before { content: '\f12e'; }
 +
 +
#a-humanpractices a:before { content: '\f19c'; }
 +
 +
#a-safety:before { content: '\f004'; }
 +
 +
#a-measurement:before { content: '\f080'; }
 +
 +
.title a {
 +
text-decoration: none;
 +
border-top:20px;
 +
color:white;
 +
}
 +
 +
 +
/* Minimal Dropdown */
 +
 +
.minimal-dropdown__container {
 +
  margin-bottom: 70px;
 +
}
 +
 +
.minimal-dropdown__title {
 +
  display: inline;
 +
  border: none;
 +
  cursor: default;
 +
}
 +
 +
.minimal-dropdown__header {
 +
  padding-bottom: 20px;
 +
  border-bottom: 1px solid grey;
 +
}
 +
 +
.minimal-dropdown__content {
 +
  margin-top: 20px;
 +
 +
  -webkit-animation: fadeIn .27s;
 +
          animation: fadeIn .27s;
 +
}
 +
 +
.minimal-dropdown__arrow {
 +
  cursor: pointer;
 +
}
 +
 +
.minimal-dropdown__arrow:before {
 +
  float: right;
 +
  font: 30px fontawesome;
 +
  content: '\f078';
 +
  color: grey;
 +
}
 +
 +
.fa-flipped-arrow:before {
 +
  content: '\f077';
 +
}
 +
 +
/* animations */
 +
@-webkit-keyframes fadeIn {
 +
    from { opacity: 0; }
 +
      to { opacity: 1; }
 +
}
 +
 +
@keyframes fadeIn {
 +
    from { opacity: 0; }
 +
      to { opacity: 1; }
 +
}
 +
 +
[id^='page-header'] {
 +
  margin-bottom: 55px;
 +
}
 +
 +
.slide-content {
 +
  padding: 0 15%;
 +
  width: 100%;
 +
  color: white;
 +
}
 +
 +
.slide-content__title {
 +
  font-size: 2.8rem;
 +
  color: #22B0B7;
 +
  text-align: center;
 +
  margin-bottom: 100px;
 +
  border-bottom: 1px solid #8C8C8C;
 +
  padding-bottom: 70px;
 +
  text-transform: uppercase;
 +
  margin-top: 100px;
 +
}
 +
 +
.oval {
 +
  width: 100%;
 +
  height: 0;
 +
  border-left: 50px solid transparent;
 +
  border-right: 50px solid transparent;
 +
  border-top: 100px solid white;
 +
}
 +
 +
#pullQuote {
 +
  height: 40%;
 +
  width: 100%;
 +
  min-height: 370px;
 +
  background-color: rgb(42, 177, 134);
 +
}
 +
 +
#pullQuote p {
 +
  margin-bottom: 0;
 +
}
 +
 +
#home-arrow-bounce {
 +
  display: block;
 +
  margin: 0 auto;
 +
  margin-top: 145px;
 +
  margin-bottom: 100px;
 +
 +
}
 +
 +
.flex {
 +
  display: -webkit-box;
 +
  display: -moz-box;
 +
  display: -ms-flexbox;
 +
  display: -webkit-flex;
 +
  display: flex;
 +
}
 +
 +
.flex-align-items {
 +
  -webkit-align-items: center;
 +
  align-items: center;
 +
}
 +
 +
 +
.flex-justify-content {
 +
  -webkit-justify-content: center;
 +
  justify-content: center;
 +
}
 +
 +
.flex-space-around {
 +
  -webkit-justify-content: space-around;
 +
  justify-content: space-around;
 +
}
 +
 +
.triad-slide-content {
 +
  padding: 0 10%;
 +
  width: 100%;
 +
}
 +
 +
.triad__container {
 +
  width: 250px;
 +
  height: 500px;
 +
  display: inline-block;
 +
}
 +
 +
.triad__title {
 +
  display: block;
 +
  color: #2d2d2d;
 +
  text-align: center;
 +
}
 +
 +
.triad__words {
 +
  line-height: 2.0rem;
 +
  text-align: center;
 +
  color: dimgrey;
 +
}
 +
 +
.triad__image {
 +
  height: 250px;
 +
  width: 250px;
 +
  background-size: cover;
 +
  margin: 0 auto;
 +
  border-radius: 125px;
 +
 +
  -webkit-box-shadow: inset 0px 0px 14px 0px rgba(0,0,0,0.2);
 +
  -moz-box-shadow: inset 0px 0px 14px 0px rgba(0,0,0,0.2);
 +
  box-shadow: inset 0px 0px 14px 0px rgba(0,0,0,0.2);
 +
}
 +
 +
#triad1-image1 {
 +
  background-image: url(https://static.igem.org/mediawiki/2015/5/5d/Algaeprojecthing.jpg);
 +
}
 +
 +
#triad1-image2 {
 +
  background-image: url(https://static.igem.org/mediawiki/2015/e/e6/Newheadercollaborations.jpg);
 +
}
 +
#triad1-image3 {
 +
  background-image: url(https://static.igem.org/mediawiki/2015/0/0a/Igeminterlabpicnortheastern.png);
 +
}
 +
 +
#slide2 {
 +
  max-height: 1065px;
 +
}
 +
 +
.big-picture {
 +
  width: 100%;
 +
  height: 700px;
 +
}
 +
 +
.big-picture__img {
 +
  background-size: cover;
 +
  display: inline-block;
 +
  height: 100%;
 +
  width: 70%;
 +
}
 +
 +
.big-picture__box {
 +
  width: 30%;
 +
  height: 100%;
 +
  display: inline-block;
 +
  float: right;
 +
  background-color: #292929;
 +
 +
}
 +
 +
.big-picture__icon {
 +
  margin-top: 30%;
 +
}
 +
 +
.big-picture__p {
 +
  color: white;
 +
  width: 100%;
 +
  text-align: center;
 +
  width: 70%;
 +
  margin: 0 auto;
 +
  margin-top: 50%;
 +
  font-size: 1.4rem;
 +
  line-height: 2rem;
 +
}
 +
 +
#slide1 {
 +
  height: 60%;
 +
  min-height: 500px;
 +
}
 +
 +
.bg-video {
 +
  text-align: center;
 +
}
 +
 +
.bg-video__overlay {
 +
  position: absolute;
 +
  height: 500px;
 +
  width: 100%;
 +
  /*background-image: url(http://www.walldevil.com/wallpapers/w08/gradients-simple-background-light-colorful-abstract.jpg);*/
 +
  opacity: .85;
 +
  top: 0px;
 +
 +
  background: #398235; /* Old browsers */
 +
  background: -moz-linear-gradient(left, #398235 0%, #6ab599 39%, #6ab599 61%, #398235 100%); /* FF3.6+ */
 +
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#398235), color-stop(39%,#6ab599), color-stop(61%,#6ab599), color-stop(100%,#398235)); /* Chrome,Safari4+ */
 +
  background: -webkit-linear-gradient(left, #398235 0%,#6ab599 39%,#6ab599 61%,#398235 100%); /* Chrome10+,Safari5.1+ */
 +
  background: -o-linear-gradient(left, #398235 0%,#6ab599 39%,#6ab599 61%,#398235 100%); /* Opera 11.10+ */
 +
  background: -ms-linear-gradient(left, #398235 0%,#6ab599 39%,#6ab599 61%,#398235 100%); /* IE10+ */
 +
  background: linear-gradient(to right, #398235 0%,#6ab599 39%,#6ab599 61%,#398235 100%); /* W3C */
 +
}
 +
 +
.bg-video__overlay-black {
 +
  position: absolute;
 +
  height: inherit;
 +
  height: 500px;
 +
  width: 100%;
 +
  background-color: black;
 +
  opacity: .3;
 +
  top: 0px;
 +
}
 +
 +
.bg-video video {
 +
  width: 100%;
 +
  height: 500px;
 +
  object-fit: inherit;
 +
 +
  box-shadow: 0px 22px 8px -14px #d6d6d6;
 +
}
 +
 +
.bg-video .slide-content {
 +
  position: absolute;
 +
  top: 8%;
 +
  padding: 0;
 +
  width: 100%;
 +
  display: block;
 +
  left: 8rem;
 +
 +
}
 +
 +
.left-triangle {
 +
  width: 0;
 +
  height: 0;
 +
  position: relative;
 +
  float: left;
 +
  margin-top: -283px;
 +
  border-style: solid;
 +
  border-width: 300px 0 0 400px;
 +
  border-color: transparent transparent transparent #ffffff;
 +
}
 +
 +
.right-triangle {
 +
  width: 0;
 +
  height: 0;
 +
  position: relative;
 +
  float: right;
 +
  margin-top: -283px;
 +
  border-style: solid;
 +
  border-width: 0 0 300px 400px;
 +
  border-color: transparent transparent #ffffff transparent;
 +
 +
}
 +
 +
.bounce {
 +
width: 60px;
 +
height: 60px ;
 +
-webkit-border-radius:50%;
 +
-moz-border-radius:50%;
 +
-ms-border-radius:50%;
 +
border-radius:50%;
 +
animation: bounce 2s;
 +
-webkit-animation: bounce 2s;
 +
-moz-animation: bounce 2s;
 +
-o-animation: bounce 2s;
 +
-webkit-animation-iteration-count: 3; /* Chrome, Safari, Opera */
 +
    a    nimation-iteration-count: 3;
 +
}
 +
 +
@-webkit-keyframes bounce {
 +
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
 +
40% {-webkit-transform: translateY(-30px);}
 +
60% {-webkit-transform: translateY(-15px);}
 +
}
 +
 +
@-moz-keyframes bounce {
 +
0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
 +
40% {-moz-transform: translateY(-30px);}
 +
60% {-moz-transform: translateY(-15px);}
 +
}
 +
 +
@-o-keyframes bounce {
 +
0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
 +
40% {-o-transform: translateY(-30px);}
 +
60% {-o-transform: translateY(-15px);}
 +
}
 +
@keyframes bounce {
 +
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
 +
40% {transform: translateY(-30px);}
 +
60% {transform: translateY(-15px);}
 +
}
 +
 +
#home-page {
 +
  background-color: white;
 +
}
 +
 +
.triad__container-a {
 +
  text-decoration: none;
 +
}
 +
 +
.triad__container-a:hover {
 +
  text-decoration: none;
 +
}
 +
 +
#neu-logo {
 +
  margin: 0 auto;
 +
}
 +
 +
#home-video-2 {
 +
  width: 70%;
 +
  height: 100%;
 +
}
 +
 +
#slide4 {
 +
  height: 50%;
 +
  min-height: 500px;
 +
}
 +
 +
#slide4 img {
 +
  width: 65%;
 +
  margin: 0 auto;
 +
}
 +
 +
.triads {
 +
margin-bottom: 80px;
 +
}
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 19:12, 4 October 2015