Difference between revisions of "Template:Cologne-Duesseldorf/css"

 
(291 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 +
<head>
 
<style>
 
<style>
  
−
/******Wiki Styles*************************************/
+
@import url('https://fonts.googleapis.com/css?family=Quicksand');
−
 
+
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
−
html {
+
@import url("https://cdn.jsdelivr.net/genericons/3.0.3/genericons.css");
−
font-size: 16px;
+
/************************************************************************
 +
Wiki Overrides
 +
************************************************************************/
 +
#top_menu_under {
 +
  display: none;
 +
  position: relative;
 +
  width: 100%;
 +
  height: 0;
 
}
 
}
−
body {
+
#top_menu_14 {
−
background-color: #fff;
+
  position: fixed;
−
font: medium sans-serif;
+
  width: 100%;
−
color: black;
+
  top: 0px;
−
margin: 0;
+
  left: 0px;
−
/*margin-top: 20px;*/
+
  height: 16px;
−
margin-top: 18px;
+
  background-color: #383838;
−
padding: 0;
+
  border-bottom: 2px solid black;
−
}
+
  z-index: 50;
−
#globalWrapper {
+
}
−
position: relative;
+
#top_title {
−
font-size: 100%;
+
  display: none;
−
width: 100%;
+
}
−
margin: 0;
+
#sideMenu {
−
padding: 0;
+
  display: none;
−
}
+
  width: 170px;
−
#top_menu_under {
+
  position: absolute;
−
display: none;
+
  top: 20px;
−
position: relative;
+
  left: 1020px;
−
width: 100%;
+
  z-index: 10;
−
height: 0;
+
  padding-top: 0px;
−
}
+
  padding-bottom: 15px;
−
/*the igem menu bar*/
+
  padding-left: 15px;
−
 
+
  padding-right: 15px;
−
#top_menu_14 {
+
  background-color: white;
−
position: fixed;
+
  text-align: left;
−
width: 100%;
+
}
−
top: 0px;
+
#bodyContent a[href ^="https://"],
−
left: 0px;
+
.link-https {
−
height: 16px;
+
  background: none;
−
background-color: #383838;
+
  padding: 0
−
border-bottom: 2px solid black;
+
}
−
z-index: 9999;
+
#bodyContent a[href ^="mailto:"], .link-mailto {
−
}
+
  padding:0;
−
#content {
+
−
width: 100%;
+
−
padding: 0;
+
−
margin: 0;
+
−
border: none;
+
−
color: inherit;
+
−
background-color: inherit;
+
−
position: relative;
+
−
}
+
−
+
−
#content * {
+
−
box-sizing: border-box;
+
−
}
+
−
#top_title {
+
−
display: none;
+
−
}
+
−
#sideMenu {
+
−
display: none;
+
−
width: 170px;
+
−
position: absolute;
+
−
top: 20px;
+
−
left: 1020px;
+
−
z-index: 10;
+
−
padding-top: 0px;
+
−
padding-bottom: 15px;
+
−
padding-left: 15px;
+
−
padding-right: 15px;
+
−
background-color: white;
+
−
text-align: left;
+
−
}
+
 
}
 
}
 
.pop_why_cover {
 
.pop_why_cover {
−
display: none;
+
  display: none;
−
z-index: 100;
+
  z-index: 50;
−
margin-top: -65px;
+
  margin-top: -65px;
−
margin-left: -40px;
+
  margin-left: -40px;
−
width: 980px;
+
  width: 980px;
−
height: 2100px;
+
  height: 2100px;
−
float: left;
+
  float: left;
−
position: absolute;
+
  position: absolute;
−
opacity: 0.5;
+
  opacity: 0.5;
−
background-color: #b2b2b2;
+
  background-color: #b2b2b2;
 
}
 
}
 
.pop_why_box {
 
.pop_why_box {
−
display: none;
+
  display: none;
−
left: 250px;
+
  left: 250px;
−
top: 0px;
+
  top: 0px;
−
background-color: white;
+
  background-color: white;
−
padding: 15px;
+
  padding: 15px;
−
width: 500px;
+
  width: 500px;
−
position: absolute;
+
  position: absolute;
−
border: 3px solid #4e606e;
+
  border: 3px solid #4e606e;
−
border-radius: 3px;
+
  border-radius: 3px;
−
z-index: 100;
+
  z-index: 50;
 
}
 
}
  
−
#footer {
+
/************************************************************************
−
font-size:100%;
+
Page Backbone
 +
************************************************************************/
 +
* {
 +
  -webkit-box-sizing: border-box;
 +
          box-sizing: border-box;
 +
  margin: 0;
 +
  padding: 0;
 +
}
 +
html {
 +
  font-size:16px;
 +
}
 +
body {
 +
  width: 100%;
 +
  margin: 48px 0 0 0;
 +
  padding: 0;
 +
  color: black;
 +
  background-color: white;
 +
  font: inherit;
 +
  font-size:16px;
 +
  word-wrap: break-word;
 
}
 
}
  
 +
@media (min-width: 1024px) {
 +
  body {
 +
    margin: 16px 0 0 0;
 +
  }
 +
}
  
−
/*************WIKI FONTS**************/
 
  
−
#HQ_page h1,
+
#globalWrapper {
−
h2,
+
  width: 100%;
−
h3,
+
  padding: 0;
−
h4,
+
  background-color: #149375;
−
h5,
+
  position: relative;
−
h6 {
+
  font-size: 16px;
−
color: #149375;
+
−
border: none;
+
−
font-weight: normal;
+
−
font-style: normal;
+
−
text-rendering: optimizeLegibility;
+
−
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+
 
}
 
}
−
#content h1,
+
#content {
−
h2,
+
  width: 100%;
−
h3,
+
  min-height: 80vh;
−
h4,
+
  margin: 0;
−
h5,
+
  padding: 0;
−
h6 {
+
  border: none;
−
font-weight: normal;
+
  color: inherit;
 +
  background-color: #ffffff;
 +
  position: relative;
 
}
 
}
−
#bodyContent h1,
+
#HQ_page {
−
h2,
+
  width: 100%;
−
h3,
+
  margin: 0;
−
h4,
+
  padding: 0;
−
h5,
+
  background: none;
−
h6 {
+
−
margin: 0 0 0.5rem 0;
+
 
}
 
}
−
#bodyContent h1,
+
#bodyContent {
−
#bodyContent h2 {
+
−
margin: 0 0 0.5rem 0;
+
 
}
 
}
−
#bodyContent h3,
+
/************************************************************************
−
#bodyContent h4,
+
Page sections
−
#bodyContent h5 {
+
************************************************************************/
−
margin: 0 0 0.5rem 0;
+
#bodyContent article{
 +
    width:90%;
 +
    margin: auto;
 +
    padding: 8% 0;
 
}
 
}
  
−
#HQ_page p {
+
#bodyContent .frontpage{
−
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+
    width: 100%;
−
font-size: 16px;
+
    margin: 0% 0;
−
text-align: justify;
+
    padding: 5%;
 +
    padding-top: 0%;
 +
    background: white;
 +
    box-shadow: 0 -20px 20px 20px white;
 
}
 
}
  
−
#HQ_page table {
+
@media (min-width: 1024px) {
−
     border: none;
+
  #bodyContent article{
−
     border-collapse: collapse;
+
     width: 85%;
−
     width: 100%;
+
     margin: 0;
−
margin: 0;
+
     padding: 8% 5%;
 +
  }
 +
}
  
 +
#ToC {
 +
  display:none;
 +
  position:fixed;
 +
  top: 100px;
 +
  left: 85%;
 +
  right: 0;
 +
  bottom: 0;
 +
  padding: 20px;
 +
  -webkit-box-orient:vertical;
 +
  -webkit-box-direction:normal;
 +
      -ms-flex-direction:column;
 +
          flex-direction:column;
 +
  -webkit-box-pack: start;
 +
      -ms-flex-pack: start;
 +
          justify-content: flex-start;
 +
  -webkit-box-align: start;
 +
      -ms-flex-align: start;
 +
          align-items: flex-start;
 
}
 
}
−
table {
+
 
−
background: white;
+
@media (min-width: 1024px){
−
font-size: 100%;
+
  #ToC{
−
color: black;
+
    display:-webkit-box;
 +
    display:-ms-flexbox;
 +
    display:flex;
 +
  }
 
}
 
}
 +
#bodyContent #ToC a {
 +
  display:block;
 +
  margin:10px 0;
 +
  position:relative;
 +
  text-align: left;}
 +
#bodyContent #ToC a[title=H1] { display:none;font-size:1.125rem;}
 +
#bodyContent #ToC a[title=H2] { font-size:0.875rem;}
 +
#bodyContent #ToC a[title=H3] { display:none;font-size:0.750rem;}
  
−
#HQ_page th {
+
#bodyContent nav {
−
    background-color: inherit;
+
  display:none;
−
    padding: 0;
+
  position: fixed;
−
    color: black;
+
  background-color: white;
−
    border: none;
+
  -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.3);
−
    border-collapse: collapse;
+
          box-shadow: 0 5px 15px rgba(0,0,0,0.3);
−
    vertical-align: text-top;
+
  left: 0;
 +
  right: 0;
 +
  top: 16px;
 +
  z-index: 50;
 
}
 
}
  
−
#HQ_page td {
+
@media (min-width: 1024px) {
−
     padding: 0;
+
  #bodyContent nav{
−
     border: none;
+
     display:-webkit-box;
−
    border-collapse: collapse;
+
     display:-ms-flexbox;
−
     vertical-align: text-top;
+
     display:flex;
 +
  }
 
}
 
}
  
  
 +
#bodyContent .menu {
 +
  width:80%;
 +
  margin:auto;
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
  -webkit-box-orient: horizontal;
 +
  -webkit-box-direction: normal;
 +
      -ms-flex-direction: row;
 +
          flex-direction: row;
 +
  -webkit-box-pack: justify;
 +
      -ms-flex-pack: justify;
 +
          justify-content: space-between;
 +
  -webkit-box-align: center;
 +
      -ms-flex-align: center;
 +
          align-items: center;
 +
  padding: 0 20px;
 +
}
  
 +
#bodyContent .menu img{
 +
  width: 128px;
 +
  max-width: 128px;
 +
}
  
 +
#bodyContent nav li::before{
 +
  content:none;
 +
}
  
−
/****************** SITE STYLES ******
+
#bodyContent nav ul {
−
*************************************/
+
  margin: 0;
 +
  padding: 0;
 +
}
  
 +
#bodyContent .menu li {
 +
  display: block;
 +
  list-style-type: none;
 +
  text-transform: uppercase;
 +
  padding-left: 0;
 +
  text-indent: 0;
 +
}
  
 +
#bodyContent .menu li a {
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
  text-align: center;
 +
  -webkit-box-align:center;
 +
      -ms-flex-align:center;
 +
          align-items:center;
 +
  text-decoration: none;
 +
  color: #777;
 +
  padding: 15px;
 +
  font-size: 0.875rem;
 +
  font-weight: bold;
 +
}
  
 +
#bodyContent .menu > li > a{
 +
  height: 80px;
 +
  padding: 0 5px;
 +
}
  
−
body{
+
 
−
margin:0px;
+
#bodyContent .menu li a:hover {
−
padding:0px;
+
  background: #ccc;
−
font-family:Roboto;
+
  color: #fff;
−
background: #149375;
+
−
overflow-x: hidden;
+
 
}
 
}
  
−
body.inactive{
+
#bodyContent .menu-item-has-children > a:after {
−
background-color: rgba(0,0,0,0.5);
+
  font-family: "Genericons";
 +
  content: "\f431";
 +
  padding-left: 5px;
 +
  -webkit-transition: -webkit-transform 0.5s;
 +
  transition: -webkit-transform 0.5s;
 +
  -o-transition: transform 0.5s;
 +
  transition: transform 0.5s;
 +
  transition: transform 0.5s, -webkit-transform 0.5s;
 
}
 
}
  
 +
#bodyContent nav ul ul {
 +
  display: none;
 +
  position: absolute;
 +
}
  
−
img{
+
#bodyContent nav ul li:hover > ul {
−
   display:flex;
+
   display: block;
−
   margin: auto;
+
   color: #fff;
−
   height: auto;
+
   padding-left: 0;
−
  max-width: 100%;
+
   background: #777;
−
   vertical-align: middle;
+
 
}
 
}
  
−
#container h1,
+
#bodyContent nav ul li:hover > ul a {
−
h2,
+
  color: #fff;
−
h3,
+
−
h4,
+
−
h5,
+
−
h6 {
+
−
padding: 0;
+
−
overflow: hidden;
+
−
background: none;
+
−
line-height: 1.4;
+
 
}
 
}
−
#container h1 {
+
 
−
    font-size: 2.986em;
+
#bodyContent .sub-menu li {
−
    margin-top: 0;
+
  display: -webkit-box;
−
    margin-bottom: .5rem
+
  display: -ms-flexbox;
 +
  display: flex;
 +
  width: 340px;
 
}
 
}
−
#container h2 {
+
#bodyContent .sub-menu li:hover,
−
    font-size: 2.488em;
+
#bodyContent .sub-menu li a:hover {
−
    margin-top: 0;
+
  background: #ddd;
−
    margin-bottom: .5rem
+
  color: #777;
 
}
 
}
−
#container h3 {
+
 
−
    font-size: 2.074em;
+
#bodyContent nav ul ul ul {
−
    margin-top: 0;
+
  margin: 0 0 0 100%;
−
    margin-bottom: .5rem
+
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
 +
          box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
 
}
 
}
−
#container h4 {
+
 
−
    font-size: 1.728em;
+
#bodyContent .menu-item-has-children .menu-item-has-children:hover > a:after {
−
    margin-top: 0;
+
  -webkit-transform: rotate(-90deg);
−
    margin-bottom: .5rem
+
      -ms-transform: rotate(-90deg);
 +
          transform: rotate(-90deg);
 +
  -webkit-transform-origin: 50% 60%;
 +
      -ms-transform-origin: 50% 60%;
 +
          transform-origin: 50% 60%;
 
}
 
}
−
#container h5 {
+
 
−
    font-size: 1.44em;
+
/************************************************************************
−
    margin-top: 0;
+
Navigation Button
−
    margin-bottom: .5rem
+
************************************************************************/
−
}
+
#bodyContent #sidebar-btn {
−
#container h6 {
+
  width: 100%;
−
    font-size: 1.2em;
+
  height: 50px;
−
    margin-top: 0;
+
  padding: 0 5vw 0 0;
−
    margin-bottom: .5rem
+
  position: fixed;
 +
  top: 16px;
 +
  right: 0;
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
  -webkit-box-orient: horizontal;
 +
  -webkit-box-direction: normal;
 +
      -ms-flex-direction: row;
 +
          flex-direction: row;
 +
  -webkit-box-pack: end;
 +
      -ms-flex-pack: end;
 +
          justify-content: flex-end;
 +
  -webkit-box-align: center;
 +
      -ms-flex-align: center;
 +
          align-items: center;
 +
  font-size: 24pt;
 +
  cursor: pointer;
 +
  z-index: 2;
 +
  color: white;
 +
  background: #1C1E1F;
 +
  border: none;
 +
  border-radius: 0;
 +
  -webkit-box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.3);
 +
          box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.3);
 +
  -webkit-transition: border 1s ease;
 +
  -o-transition: border 1s ease;
 +
  transition: border 1s ease;
 
}
 
}
 +
#bodyContent #sidebar-btn:hover {
 +
  border: none;  }
  
−
#container p {
+
#bodyContent #sidebar-btn i {
−
margin: 0;
+
  -webkit-transition: color 1s ease;
−
   line-height: 1.7;
+
   -o-transition: color 1s ease;
 +
  transition: color 1s ease;
 
}
 
}
−
#container a {
+
#bodyContent #sidebar-btn:hover i {
−
text-decoration: none;
+
  color: #149375;
−
font-weight: normal;
+
−
color: #149375;
+
−
background: none;
+
 
}
 
}
−
#container a:link {
+
 
−
color: #149375;
+
@media (min-width: 1024px) {
 +
  #bodyContent #sidebar-btn {
 +
    display:none;
 +
    width: 20px;
 +
    height: 20px;
 +
    padding: 28px;
 +
    left: 2vw;
 +
    top: 4vw;
 +
    -webkit-box-pack: center;
 +
        -ms-flex-pack: center;
 +
            justify-content: center;
 +
    background: #149375;
 +
    border: 3px solid white;
 +
    border-radius: 100%;
 +
  }
 +
 
 +
  #bodyContent #sidebar-btn:hover {
 +
    border: 3px solid black;
 +
  }
 +
  #bodyContent #sidebar-btn:hover i {
 +
    color: black;
 +
  }
 +
  #bodyContent #sidebar-btn.active {
 +
    opacity:0;
 +
  }
 
}
 
}
−
#container a:visited {
+
/************************************************************************
−
color: #149375;
+
Navigation bar
 +
************************************************************************/
 +
#bodyContent #sidebar {
 +
  z-index: 5;
 +
  background: #151718;
 +
  width: 250px;
 +
  height: 100%;
 +
  display: block;
 +
  position: fixed;
 +
  top: 16px;
 +
  left: 0;
 +
  visibility: hidden;
 +
  opacity: 0;
 +
  -webkit-transition: all 0.5s ease;
 +
  -o-transition: all 0.5s ease;
 +
  transition: all 0.5s ease;
 +
  overflow-y: auto;
 
}
 
}
−
#container a:hover,
+
#bodyContent #sidebar.visible {
−
#container a:focus {
+
  visibility: visible;
−
color: #149375;
+
  opacity: 1;
−
text-decoration: none;
+
 
}
 
}
−
#container a:active {
+
#bodyContent #sidebar ul {
−
color: #149375;
+
  margin: 0px;
 +
  padding: 0px;
 
}
 
}
−
 
+
#bodyContent #sidebar ul li {
−
#container hr {
+
  list-style: none;
−
    height: 1px;
+
  -webkit-transition: all 0.5s ease;
−
    color: #aaa;
+
  -o-transition: all 0.5s ease;
−
    margin: 16px 0;
+
  transition: all 0.5s ease;
 +
  margin: 0;
 +
  padding: 0;
 +
  text-indent: 0;
 
}
 
}
  
−
#sidebar{
+
#bodyContent #sidebar ul li::before{
−
z-index: 3;
+
    content: none;
−
background:#151718;
+
    padding-right: 0;
−
width:250px;
+
−
height:100%;
+
−
display:block;
+
−
position:fixed;
+
−
top: 18px;
+
−
transition:0.5s linear;
+
−
visibility: hidden;
+
−
opacity: 0;
+
−
transition: all 0.5s ease;
+
−
overflow-y: auto;
+
−
}
+
  
−
#sidebar.visible{
 
−
visibility: visible;
 
−
opacity: 1;
 
 
}
 
}
−
 
+
#bodyContent #sidebar ul li a {
−
#sidebar ul{
+
  font-size: 1rem;
−
margin:0px;
+
  background: #1C1E1F;
−
padding:0px;
+
  color: #ccc;
 +
  border-bottom: 1px solid #111;
 +
  display: block;
 +
  width: 250px;
 +
  padding: 10px;
 +
  text-decoration: none;
 +
  -webkit-transition: all 0.5s ease;
 +
  -o-transition: all 0.5s ease;
 +
  transition: all 0.5s ease;
 
}
 
}
−
 
+
#bodyContent #sidebar ul li a:hover {
−
#sidebar ul li{
+
  background-color: rgba(255, 255, 255, 0.3)
−
list-style:none;
+
−
+
−
transition: all 2s ease;
+
 
}
 
}
−
 
+
#bodyContent #sidebar ul ul a {
−
#sidebar ul li a{
+
  font-size: 1rem;
−
background:#1C1E1F;
+
  background: #1C1E1F;
−
color:#ccc;
+
  color: #ccc;
−
border-bottom:1px solid #111;
+
  border-bottom: 1px solid #111;
−
display:block;
+
  display: block;
−
width:230px;
+
  width: 250px;
−
padding:10px;
+
  padding: 10px;
−
text-decoration: none;
+
  text-decoration: none;
 +
  -webkit-transition: all 0.5s ease;
 +
  -o-transition: all 0.5s ease;
 +
  transition: all 0.5s ease;
 
}
 
}
−
 
+
#bodyContent #sidebar ul ul a:hover {
−
#sidebar ul li a:hover{
+
  background-color: rgba(255, 255, 255, 0.3)
−
background-color: rgba(255,255,255,0.3)
+
 
}
 
}
−
 
+
#bodyContent #sidebar ul ul.sub li {
−
/*** Accordion Menu ***/
+
  display: none;
−
#sidebar ul ul a {
+
  padding-left: 15px;
−
background:#1C1E1F;
+
}
−
color:#ccc;
+
#bodyContent #sidebar ul ul.sub li.active {
−
border-bottom:1px solid #111;
+
  display: block;
−
display:block;
+
}
−
width:230px;
+
#bodyContent #overlay {
−
padding:10px;
+
  position: fixed;
−
text-decoration: none;
+
  width: 100%;
 +
  height: 100%;
 +
  top: 0;
 +
  left: 0;
 +
  right: 0;
 +
  bottom: 0;
 +
  background-color: rgba(0, 0, 0, 0.5);
 +
  z-index: 1;
 +
  cursor: pointer;
 +
  visibility: hidden;
 +
  opacity: 0;
 +
  -webkit-transition: all 0.5s ease;
 +
  -o-transition: all 0.5s ease;
 +
  transition: all 0.5s ease;
 +
}
 +
#bodyContent #overlay.active {
 +
  visibility: visible;
 +
  opacity: 1;
 +
}
 +
#bodyContent footer {
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
  -webkit-box-orient: horizontal;
 +
  -webkit-box-direction: normal;
 +
      -ms-flex-direction: row;
 +
          flex-direction: row;
 +
  -webkit-box-pack: center;
 +
      -ms-flex-pack: center;
 +
          justify-content: center;
 +
  -webkit-box-align: center;
 +
      -ms-flex-align: center;
 +
          align-items: center;
 +
  height: 15vw;
 +
  max-height: 250px;
 +
  background: #1C1E1F;
 +
}
 +
#bodyContent footer i {
 +
  color: rgba(255, 255, 255, 0.3);
 +
  padding: 20px;
 +
  font-size: 5vw;
 +
  -webkit-transition: all 0.5s ease;
 +
  -o-transition: all 0.5s ease;
 +
  transition: all 0.5s ease;
 +
}
 +
#bodyContent footer i:hover {
 +
  color: rgba(255, 255, 255, 1);
 
}
 
}
  
−
#sidebar ul ul a:hover{
+
/************************************************************************
−
background-color: rgba(255,255,255,0.3)
+
General page styles
 +
************************************************************************/
 +
#bodyContent img {
 +
  display: block;
 +
  max-width: 100%;
 +
  padding: 20px;
 +
  margin: 20px auto;
 
}
 
}
  
−
#sidebar ul ul.sub li{
+
@media (min-width: 1024px){
−
display:none;
+
  #bodyContent .floatleft{
−
padding-left: 15px;
+
    float:left;
 +
    margin:0;
 +
  }
 +
 
 +
  #bodyContent .floatright{
 +
      float:right;
 +
      margin:0;
 +
  }
 +
  #bodyContent img.nomargin{
 +
    margin:0;
 +
  }
 +
 
 
}
 
}
  
−
#sidebar ul ul.sub li.active{
+
#bodyContent svg {
−
display: block;
+
  display:block;
 
}
 
}
  
−
#overlay{
+
#bodyContent svg.fullscreen{
−
     position: fixed;
+
     padding: 10% 0;
−
    width: 100%;
+
     margin: 0 5%;
−
    height: 100%;
+
−
    top: 0;
+
−
     left: 250px;
+
−
    right: 0;
+
−
    bottom: 0;
+
−
    background-color: rgba(0,0,0,0.5);
+
−
    z-index: 1;
+
−
    cursor: pointer;
+
−
visibility: hidden;
+
−
opacity: 0;
+
−
transition: all 0.5s ease;
+
 
}
 
}
  
−
#overlay.active{
+
#bodyContent video{
−
visibility: visible;
+
  max-width:100%;
−
opacity: 1;
+
  margin: 5% auto;
 
}
 
}
  
−
#container{
+
#bodyContent .max-width {
−
transition:0.5s linear;
+
  width: 100%;
−
display: flex;
+
−
flex-direction: column;
+
−
align-items: center;
+
−
padding: 5%;
+
 
}
 
}
  
−
#paper {
+
#bodyContent .limited-height{
−
     display: flex;
+
     max-height: 500px;
−
flex-direction: column;
+
     width: auto;
−
     max-width: 1366px;
+
−
    background: white;
+
−
    box-shadow: 0 0 12px 0px rgba(0,0,0,0.4);
+
−
padding: 5%;
+
 
}
 
}
  
−
#sidebar-btn{
+
#bodyContent .half-width{
−
    font-size: 24pt;
+
  width:100%;
−
    z-index: 2;
+
  margin:5% auto;
−
    position: fixed;
+
−
    right: 2%;
+
−
    top: 4%;
+
−
    display: flex;
+
−
    flex-direction: row;
+
−
    justify-content: center;
+
−
    align-items: center;
+
−
    width: 20px;
+
−
    height: 20px;
+
−
    cursor: pointer;
+
−
    background: #149375;
+
−
    padding: 28px;
+
−
    color: white;
+
−
    border: 3px solid white;
+
−
    border-radius: 100%;
+
−
    box-shadow: 0px 4px 12px 2px rgba(0,0,0,0.3);
+
 
}
 
}
  
−
#sidebar-btn:hover{
+
#bodyContent .quarter-width{
−
border: 3px solid black;
+
  width:100%;
 +
  margin:5% auto;
 
}
 
}
  
−
#sidebar-btn:hover i{
+
 
−
color:black;
+
@media (min-width: 1024px){
 +
  #bodyContent .half-width{
 +
    width:50%;
 +
  }
 +
  #bodyContent .quarter-width{
 +
    width:25%;
 +
}
 
}
 
}
  
−
section{
+
#bodyContent h1,h2,h3,h4,h5,h6 {
−
margin: 8px;
+
  color: #149375;
 +
  border: none;
 +
  font-weight: normal;
 +
  font-style: normal;
 +
  text-rendering: optimizeLegibility;
 +
  font-family: 'Quicksand', sans-serif;
 +
  line-height: 1.3;
 +
}
 +
#bodyContent h1 {
 +
  font-size: 2.986rem;
 +
  margin: 20px 0;
 +
  padding: 0;
 
}
 
}
  
−
section#header{
+
@media (min-width: 1024px) {
−
justify-content: center;
+
  #bodyContent h1{
−
margin-bottom: 24px;
+
  text-transform: uppercase;
 +
  font-size: 6.854rem;
 +
  border-left: 5px solid #149375;
 +
  padding: 0 20px;
 +
  }
 
}
 
}
  
−
section#gallery {
+
#bodyContent h2 {
−
    display: flex;
+
  font-size: 2.488rem;
−
    flex-direction: column;
+
  margin: 18px 0;
 +
  padding: 0;
 
}
 
}
  
 +
@media (min-width: 1024px) {
 +
  #bodyContent h2{
 +
    font-size:4.236rem;
 +
    }
 +
  }
  
−
section#gallery .col2 {
+
#bodyContent h3 {
−
display: flex;
+
  font-size: 2.074rem;
−
flex-direction: row;
+
  margin: 16px 0;
 +
  padding: 0;
 
}
 
}
  
−
section#gallery .col2 > div {
+
@media (min-width: 1024px) {
−
width: 50%;
+
  #bodyContent h3{
−
padding: 10px;
+
    font-size:2.618rem;
 +
  }
 
}
 
}
−
 
+
#bodyContent h4 {
−
section#gallery .col2 > div:first-child {
+
  font-size: 1.728rem;
−
margin-right: 20px;
+
  margin: 14px 0;
 +
  padding: 0;
 
}
 
}
−
 
+
@media (min-width: 1024px) {
−
section#footer{
+
  #bodyContent h4{
−
     display: flex;
+
     font-size:1.618rem;
−
    flex-direction: row;
+
  }
−
    justify-content: center;
+
}
−
    align-items: center;
+
#bodyContent h5 {
−
    height: 15vw;
+
  font-size: 1.44rem;
−
max-height: 250px;
+
  margin: 12px 0;
−
    margin: 0;
+
  padding: 0;
−
    background: #1C1E1F;
+
}
−
    position: absolute;
+
#bodyContent h6 {
−
    left: 0;
+
  font-size: 1.2rem;
−
    right: 0;
+
  margin: 10px 0;
 +
  padding: 0;
 
}
 
}
  
−
section#footer i{
+
#bodyContent h1 a {font-size: inherit;}
−
color:rgba(255,255,255,0.3);
+
#bodyContent h2 a {font-size: inherit;}
−
padding: 20px;
+
#bodyContent h3 a {font-size: inherit;}
−
font-size: 5vw;
+
#bodyContent h4 a {font-size: inherit;}
 +
#bodyContent h5 a {font-size: inherit;}
 +
#bodyContent h6 a {font-size: inherit;}
 +
 
 +
#bodyContent p {
 +
  font-family: 'Quicksand', sans-serif;
 +
  font-size: 1.250rem;
 +
  text-align: justify;
 +
  line-height: 1.5;
 +
  margin:0 auto;
 +
  padding: 0;
 +
}
 +
#bodyContent article p {
 +
  padding: 10px 0;
 +
}
 +
#bodyContent em{}
 +
#bodyContent b,strong {
 +
  font-weight: bold;
 +
  line-height: inherit;
 +
  color: #149375;
 +
}
 +
#bodyContent samp{}
 +
#bodyContent kbd{}
 +
#bodyContent mark{
 +
    background-color: #149375;
 +
    padding: 0 5px;
 +
    border-radius: 10px;
 +
    color: white;
 
}
 
}
 +
#bodyContent cite{}
 +
#bodyContent dfn{}
  
−
section#footer i:hover{
+
#bodyContent abbr {
−
color: rgba(255,255,255,1);
+
  vertical-align: baseline;
 +
  font-size: inherit;
 +
  text-decoration: none;
 +
  color: rgba(0, 0, 0, 0.5);
 +
  font-size: 1.250rem;
 +
}
 +
#bodyContent abbr[title],.explain[title] {
 +
  border-bottom: none;
 +
  cursor: help;
 
}
 
}
  
−
button.accordion {
+
#bodyContent pre {
−
    background-color: #eee;
+
      display:block;
−
    color: #444;
+
      overflow-x: auto;
−
    cursor: pointer;
+
      background: rgba(0,0,0,0);
−
    padding: 18px;
+
      padding: 20px;
−
    width: 100%;
+
      width: 100%;
−
    border: none;
+
      border: none;
−
     text-align: left;
+
      line-height: 1;
−
     outline: none;
+
  }
−
     font-size: 15px;
+
#bodyContent code {
−
     transition: 0.4s;
+
     background: rgba(158, 158, 158, 0.5);
 +
    padding: 0 5px;
 +
    border-radius: 5px;
 +
     border:none;
 +
  }
 +
#bodyContent pre code{
 +
     background: none;
 +
     padding: 0;
 +
    border-radius: 0;
 +
  }
 +
 
 +
#bodyContent figure {
 +
  margin-bottom: 20px;
 
}
 
}
  
−
button.accordion.active, button.accordion:hover {
+
#bodyContent figcaption {
−
    background-color: rgba(20, 147, 117,0.7);
+
  font-family: 'Quicksand', sans-serif;
 +
  font-size: 0.75rem;;
 +
  padding-left: 20px;
 +
  font-style: italic;
 
}
 
}
  
−
button.accordion:after {
+
#bodyContent figcaption a{
−
    content: '\002B';
+
  font-size: 0.75rem;;
−
    color: #777;
+
−
    font-weight: bold;
+
−
    float: right;
+
−
    margin-left: 5px;
+
 
}
 
}
  
−
button.accordion.active:after {
+
#bodyContent figcaption abbr{
−
    content: "\2212";
+
  font-size: 0.75rem;;
 
}
 
}
  
−
div.panel {
+
#bodyContent .flex-row-2{
−
     padding: 0 18px;
+
    display:-webkit-box;
−
     background-color: white;
+
    display:-ms-flexbox;
−
     max-height: 0;
+
    display:flex;
−
     overflow: hidden;
+
    -webkit-box-orient: vertical;
−
     transition: max-height 0.2s ease-out;
+
    -webkit-box-direction: normal;
 +
        -ms-flex-direction: column;
 +
            flex-direction: column;
 +
  }
 +
#bodyContent .flex-row-2 div{
 +
    display:-webkit-box;
 +
    display:-ms-flexbox;
 +
    display:flex;
 +
    -webkit-box-orient: vertical;
 +
    -webkit-box-direction: normal;
 +
        -ms-flex-direction: column;
 +
            flex-direction: column;
 +
    -webkit-box-pack: center;
 +
        -ms-flex-pack: center;
 +
            justify-content: center;
 +
    -webkit-box-align: center;
 +
        -ms-flex-align: center;
 +
            align-items: center;
 +
    width: 100%;
 +
  }
 +
#bodyContent .flex-row-3{
 +
     display:-webkit-box;
 +
     display:-ms-flexbox;
 +
    display:flex;
 +
     -webkit-box-orient: vertical;
 +
     -webkit-box-direction: normal;
 +
        -ms-flex-direction: column;
 +
            flex-direction: column;
 +
          }
 +
  #bodyContent .flex-row-3 div{
 +
      display:-webkit-box;
 +
      display:-ms-flexbox;
 +
      display:flex;
 +
      -webkit-box-orient: vertical;
 +
      -webkit-box-direction: normal;
 +
          -ms-flex-direction: column;
 +
              flex-direction: column;
 +
      -webkit-box-pack: center;
 +
          -ms-flex-pack: center;
 +
              justify-content: center;
 +
      -webkit-box-align: center;
 +
          -ms-flex-align: center;
 +
              align-items: center;
 +
      width: 100%;
 +
     }
 +
 
 +
@media (min-width: 1024px) {
 +
  #bodyContent .flex-row-2{
 +
      -webkit-box-orient: horizontal;
 +
      -webkit-box-direction: normal;
 +
          -ms-flex-direction: row;
 +
              flex-direction: row;
 +
    }
 +
  #bodyContent .flex-row-2 *{
 +
    -webkit-box-flex:1;
 +
        -ms-flex:1;
 +
            flex:1;
 +
  }
 +
  #bodyContent .flex-row-2 div{
 +
    width:50%;
 +
  }
 +
  #bodyContent .flex-row-2 img{
 +
    padding: 20px;
 +
  }
 +
  #bodyContent .flex-row-3{
 +
      -webkit-box-orient: horizontal;
 +
      -webkit-box-direction: normal;
 +
          -ms-flex-direction: row;
 +
              flex-direction: row;
 +
    }
 +
  #bodyContent .flex-row-3 *{
 +
    -webkit-box-flex:1;
 +
        -ms-flex:1;
 +
            flex:1;
 +
  }
 +
  #bodyContent .flex-row-3 div{
 +
    width:33%;
 +
  }
 +
  #bodyContent .flex-row-3 img{
 +
    padding: 20px;
 +
  }
 
}
 
}
  
−
span.label {
+
  /************************************************************************
 +
  Special Text
 +
  ************************************************************************/
 +
  /* label */
 +
  span.label {
 
     display: inline-block;
 
     display: inline-block;
 
     padding: 0 6px;
 
     padding: 0 6px;
Line 516: Line 864:
 
     background: #149375;
 
     background: #149375;
 
     color: #fefefe;
 
     color: #fefefe;
 +
  }
 +
  /************************************************************************
 +
  Layout Elements
 +
  ************************************************************************/
 +
  /************************************************************************
 +
  Tabs
 +
  ************************************************************************/
 +
  #bodyContent .tab {
 +
    width: 100%;
 +
    display:-webkit-box;
 +
    display:-ms-flexbox;
 +
    display:flex;
 +
    -webkit-box-orient:horizontal;
 +
    -webkit-box-direction:normal;
 +
        -ms-flex-direction:row;
 +
            flex-direction:row;
 +
    -webkit-box-pack: center;
 +
        -ms-flex-pack: center;
 +
            justify-content: center;
 +
  }
 +
 +
  #bodyContent .tab button {
 +
    background-color:#fff;
 +
    border:none;
 +
    border-bottom:5px solid #ccc;
 +
    outline:none;
 +
    -webkit-transition: 0.3s;
 +
    -o-transition: 0.3s;
 +
    transition: 0.3s;
 +
    width: 100%;
 +
    padding: 20px;
 +
  }
 +
 +
  #bodyContent .tab button:hover{
 +
    background-color:#eee;
 +
  }
 +
 +
  #bodyContent .tab button.active {
 +
    border-bottom:5px solid #149375;
 +
  }
 +
 +
  #bodyContent .tab img{
 +
    padding: 20%;
 +
  }
 +
 +
  #bodyContent .tabcontent {
 +
    display:none;
 +
  }
 +
 +
  #bodyContent .tabcontent:first-child{
 +
    display:block;
 +
  }
 +
 +
  #bodyContent .tabcontent {
 +
      -webkit-animation: fadeEffect 1s;
 +
      animation: fadeEffect 1s; /* Fading effect takes 1 second */
 +
  }
 +
 +
  @-webkit-keyframes fadeEffect {
 +
      from {opacity: 0;}
 +
      to {opacity: 1;}
 +
  }
 +
 +
  @keyframes fadeEffect {
 +
      from {opacity: 0;}
 +
      to {opacity: 1;}
 +
  }
 +
  /************************************************************************
 +
  Callout
 +
  ************************************************************************/
 +
  #bodyContent div.callout {
 +
    margin: 24px 0;
 +
    padding: 20px;
 +
    border: 5px solid #149375;
 +
    border-radius: 20px;
 +
  }
 +
  /************************************************************************
 +
  Accordion
 +
  ************************************************************************/
 +
  #bodyContent button.accordion {
 +
      display:-webkit-box;
 +
      display:-ms-flexbox;
 +
      display:flex;
 +
      -webkit-box-orient:vertical;
 +
      -webkit-box-direction:normal;
 +
          -ms-flex-direction:column;
 +
              flex-direction:column;
 +
      -webkit-box-align:center;
 +
          -ms-flex-align:center;
 +
              align-items:center;
 +
      font-family: 'Quicksand', sans-serif;
 +
      margin: 10px;
 +
      border-radius: 10px;
 +
      background-color: rgba(20, 147, 117, 0.125);
 +
      cursor: pointer;
 +
      padding: 18px;
 +
      width: 100%;
 +
      border: none;
 +
      outline: none;
 +
      -webkit-transition: all 0.5s ease;
 +
      -o-transition: all 0.5s ease;
 +
      transition: all 0.5s ease;
 +
    }
 +
  #bodyContent button.accordion h2{
 +
      font-size: 1.250rem;
 +
      text-transform:uppercase;
 +
      letter-spacing: 7px;
 +
  }
 +
  #bodyContent button.accordion h3{
 +
      font-size: 1.250rem;
 +
      text-transform:uppercase;
 +
      letter-spacing: 7px;
 +
  }
 +
  #bodyContent button.accordion h4{
 +
      font-size: 1.250rem;
 +
      text-transform:uppercase;
 +
      letter-spacing: 7px;
 +
  }
 +
 +
  #bodyContent button.accordion:after{
 +
    //content:"\25BE";
 +
    content:"v";
 +
    font-size:1.25rem;
 +
    font-weight:bold;
 +
    margin: 18px 0;
 +
    width:100%;
 +
    text-align:center;
 +
    background-color:white;
 +
    border-radius: 10px;
 +
  }
 +
 +
    #bodyContent button.accordion.active,
 +
    #bodyContent button.accordion:hover {
 +
      background-color: rgba(20, 147, 117, 0.7);
 +
    }
 +
 +
 +
  .panel {
 +
    padding: 0 18px;
 +
    background-color: white;
 +
    display:none;
 +
    opacity: 1;
 +
    -webkit-animation: fade 1s;
 +
            animation: fade 1s;
 +
  }
 +
 +
  .panel.show {
 +
    display: block;
 +
    opacity: 1;
 +
    -webkit-animation: fade 1s;
 +
            animation: fade 1s;
 +
  }
 +
  @-webkit-keyframes fade {
 +
      0% {
 +
          opacity: 0;
 +
      }
 +
 +
      100% {
 +
          opacity: 1;
 +
      }
 +
  }
 +
  @keyframes fade {
 +
      0% {
 +
          opacity: 0;
 +
      }
 +
 +
      100% {
 +
          opacity: 1;
 +
      }
 +
  }
 +
  #bodyContent .panel p {
 +
    font-size: 1.125rem;
 +
  }
 +
  #bodyContent .panel p {
 +
    font-size: 1.125rem;
 +
  }
 +
 +
/************************************************************************
 +
Tables
 +
************************************************************************/
 +
#bodyContent table{
 +
  font: 18px Quicksand;
 +
  background: rgba(0,0,0,0);
 +
  border: none;
 +
  margin: 0;
 +
  width: 100%;
 +
  table-layout: fixed;
 +
}
 +
#bodyContent table thead {
 +
  display:none;
 +
}
 +
@media (min-width: 1024px) {
 +
  #bodyContent table thead {
 +
    display:table-header-group;
 +
  }
 
}
 
}
  
−
b, strong {
+
#bodyContent table th{
−
    font-weight: bold;
+
  border: none;
−
    line-height: inherit;
+
  background-color: rgba(20, 147, 117, 0.5);
−
    color: #149375;
+
  text-align: left;
 +
}
 +
#bodyContent table td {
 +
  border:none;
 +
  display:block;
 +
}
 +
#bodyContent table tbody td:before{
 +
  content: attr(data-th);
 +
  font-weight: bold;
 +
  display: inline-block;
 +
  width: 6rem;
 
}
 
}
  
−
div.callout {
+
@media (min-width: 1024px){
−
     margin: 24px 0;
+
  #bodyContent table tbody td{
 +
     display: table-cell;
 
     padding: 10px;
 
     padding: 10px;
−
     border: 2px solid rgba(20, 147, 117, 0.5);
+
     border-collapse: collapse;
−
     border-radius: 0;
+
     vertical-align: middle;
 +
  }
 +
  #bodyContent table tbody td:before{
 +
    content:none;
 +
  }
 
}
 
}
  
−
#container table {
+
#bodyContent table tr{
−
    width: 100%;
+
  background-color: rgba(0,0,0,0);
−
    margin-bottom: 1rem;
+
  -webkit-transition: all 0.5s ease;
 +
  -o-transition: all 0.5s ease;
 +
  transition: all 0.5s ease;
 
}
 
}
 +
#bodyContent table tr:nth-child(even) {
 +
  background-color: rgba(20, 147, 117, 0.125);
 +
}
 +
#bodyContent table tr:hover {
 +
  background-color: rgba(20, 147, 117, 0.75);
 +
}
 +
 +
@media (min-width: 1024px){
  
−
#container table thead{
+
  #bodyContent table th:first-child{
−
     background-color: inherit;
+
     border-radius: 10px 0 0 10px;
−
     background: rgba(20, 147, 117, 0.2);
+
  }
−
     color: #263238
+
  #bodyContent table th:last-child{
 +
     border-radius: 0 10px 10px 0;
 +
  }
 +
  #bodyContent table td:first-child{
 +
     border-radius: 10px 0 0 10px;
 +
  }
 +
  #bodyContent table td:last-child{
 +
    border-radius: 0 10px 10px 0;
 +
  }
 +
  #bodyContent table.small_first th:first-child {
 +
    width: 120px;
 +
  }
 +
  #bodyContent table.small_first td:first-child  {
 +
    width: 120px;
 +
  }
 
}
 
}
−
#container table thead tr {
+
/************************************************************************
−
background:inherit;
+
Lists
 +
************************************************************************/
 +
#bodyContent ul {
 +
  list-style-type: none;
 +
  list-style-image: none;
 +
  color: black;
 +
  margin: 2rem 0 2rem 3rem;
 +
  padding: 0;
 +
  line-height: 1.5;
 
}
 
}
−
#container table thead th {
 
−
    padding: .5rem .625rem .625rem
 
−
}
 
−
#container table thead td {
 
−
    padding: .5rem .625rem .625rem
 
−
}
 
  
−
+
#bodyContent ol {
−
#container table tbody {
+
  color: black;
−
    background-color: inherit;
+
  margin: 2rem 0 2rem 3rem;
 +
  padding: 0;
 +
  line-height: 1.5;
 
}
 
}
−
#container table tbody tr {
+
 
−
background:inherit;
+
#bodyContent li {
 +
  font-family: 'Quicksand', sans-serif;
 +
  font-size: 1.250rem;
 +
  margin: 0;
 +
  padding: 0;
 +
  line-height: 1.5;
 +
  padding-left: 1rem;
 +
  text-indent: -.7rem;
 
}
 
}
−
#container table tbody tr:nth-child(even) {
+
#bodyContent li::before {
−
    background-color: rgba(20, 147, 117, 0.08)
+
  content: "•";
 +
  color: #149375;
 +
  padding-right: 7px;
 
}
 
}
−
#container table tbody th {
 
−
    padding: .5rem .625rem .625rem
 
−
}
 
−
#container table tbody td {
 
−
    padding: .5rem .625rem .625rem
 
−
}
 
  
−
#container table.hover thead tr:hover {
+
#bodyContent ul.eric{
−
     background-color: rgba(17, 125, 99, 0.2);
+
     display: flex;
 +
    flex-direction: column;
 
}
 
}
−
#container table.hover tbody tr:hover {
+
 
−
     background-color: rgba(17, 125, 99, 0.2);
+
#bodyContent ul.eric li{
 +
     text-indent: 0;
 
}
 
}
  
−
.card {
+
 
−
min-width: 250px;
+
#bodyContent ul.eric li::before {
−
     margin-bottom: 1rem;
+
    content: "";
−
     border: 1px solid #eceff1;
+
     color: #149375;
−
     border-radius: 0;
+
     float: left;
−
     background: #eceff1;
+
     padding-right: 10px;
−
     box-shadow: none;
+
    display: block;
−
     overflow: hidden;
+
    height: 32px;
−
     color: #263238
+
    width: 32px;
 +
     background-image: url(https://static.igem.org/mediawiki/2017/5/50/T--Cologne-Duesseldorf--check.jpeg);
 +
     background-repeat: no-repeat;
 +
     background-position: left center;
 +
     background-size: 26px;
 
}
 
}
−
.card>:last-child {
+
 
−
    margin-bottom: 0
+
#bodyContent ol li::before {
 +
  content: none;
 
}
 
}
−
.card-divider {
+
#bodyContent a {
−
    padding: 1rem;
+
  font-family: 'Quicksand', sans-serif;
−
    background: #eceff1
+
  font-size: 1.250rem;
 +
  text-align: justify;
 +
  line-height: 1.5;
 +
  list-style-image: none;
 +
  list-style-type: none;
 +
  color: #149375;
 +
  -webkit-transition: all 0.5s ease;
 +
  -o-transition: all 0.5s ease;
 +
  transition: all 0.5s ease;
 
}
 
}
−
.card-divider>:last-child {
+
#bodyContent a:hover {
−
    margin-bottom: 0
+
  color: #0e6752;
 
}
 
}
−
.card-section {
+
#bodyContent a:active {
−
    padding: 1rem
+
  color: #0e6752;
 
}
 
}
−
.card-section>:last-child {
+
#bodyContent a:visited {
−
     margin-bottom: 0
+
  color: #149375;
 +
}
 +
/************************************************************************
 +
Flex gallery
 +
************************************************************************/
 +
#bodyContent .flex-gallery {
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
  -webkit-box-orient: vertical;
 +
  -webkit-box-direction: normal;
 +
      -ms-flex-direction: column;
 +
          flex-direction: column;
 +
  -ms-flex-wrap: initial;
 +
      flex-wrap: initial;
 +
  -webkit-box-pack: start;
 +
      -ms-flex-pack: start;
 +
          justify-content: flex-start;
 +
  -webkit-box-align: center;
 +
      -ms-flex-align: center;
 +
          align-items: center;
 +
}
 +
@media (min-width: 768px) {
 +
  #bodyContent .flex-gallery {
 +
     -webkit-box-orient: horizontal;
 +
    -webkit-box-direction: normal;
 +
        -ms-flex-direction: row;
 +
            flex-direction: row;
 +
    -ms-flex-wrap: wrap;
 +
        flex-wrap: wrap;
 +
    -webkit-box-align: end;
 +
        -ms-flex-align: end;
 +
            align-items: flex-end;
 +
    -webkit-box-pack: center;
 +
        -ms-flex-pack: center;
 +
            justify-content: center;
 +
  }
 
}
 
}
  
 +
@media (min-width: 768px) {
 +
  #bodyContent .center-gallery{
 +
    -webkit-box-align: center;
 +
        -ms-flex-align: center;
 +
            align-items: center;
 +
  }
 +
}
  
−
.row {
+
#bodyContent .flex-gallery div {
−
display:flex;
+
  width: 200px;
−
flex-direction: row;
+
  height: auto;
−
flex-wrap:wrap;
+
  display:-webkit-box;
 +
  display:-ms-flexbox;
 +
  display:flex;
 +
  -webkit-box-orient: vertical;
 +
  -webkit-box-direction: normal;
 +
      -ms-flex-flow: column;
 +
          flex-flow: column;
 +
  -webkit-box-pack: end;
 +
      -ms-flex-pack: end;
 +
          justify-content: flex-end;
 +
  margin: 0 10px;
 
}
 
}
  
−
.row > div {
+
#bodyContent .flex-gallery img {
−
flex: 1;
+
  max-width: 100%;
−
margin: 10px;
+
  height: auto;
 +
  margin: 0 auto 40px auto;
 +
  -webkit-filter: grayscale(100%);
 +
          filter: grayscale(100%);
 +
  -webkit-transition: all 0.5s ease;
 +
  -o-transition: all 0.5s ease;
 +
  transition: all 0.5s ease;
 +
}
 +
#bodyContent .flex-gallery img:hover {
 +
  -webkit-filter: grayscale(0%);
 +
          filter: grayscale(0%);
 +
}
 +
#bodyContent .modalDialog {
 +
  display:none;
 +
  opacity: 0;
 +
  position: fixed;
 +
  top: 0;
 +
  right: 0;
 +
  bottom: 0;
 +
  left: 0;
 +
  background: rgba(0, 0, 0, 0.8);
 +
  z-index: 100;
 +
  -webkit-transition: opacity 0.5s ease-in;
 +
  -o-transition: opacity 0.5s ease-in;
 +
  transition: opacity 0.5s ease-in;
 +
  pointer-events: none;
 +
}
 +
#bodyContent .modalDialog:target {
 +
  display:block;
 +
  opacity: 1;
 +
  pointer-events: auto;
 +
}
 +
#bodyContent .modalDialog > div {
 +
  display:-webkit-box;
 +
  display:-ms-flexbox;
 +
  display:flex;
 +
  -webkit-box-orient: horizontal;
 +
  -webkit-box-direction: normal;
 +
      -ms-flex-direction: row;
 +
          flex-direction: row;
 +
  position: absolute;
 +
  top: 15vh;
 +
  left: 15vw;
 +
  right: 15vw;
 +
  border-radius: 20px;
 +
  background: #fff;
 +
}
 +
#bodyContent .modalDialog > div > div {
 +
  margin: 20px;
 +
}
 +
#bodyContent a.close {
 +
  font-size: 24pt;
 +
  z-index: 3;
 +
  position: fixed;
 +
  right: 13vw;
 +
  top: 11vh;
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
  -webkit-box-orient: horizontal;
 +
  -webkit-box-direction: normal;
 +
      -ms-flex-direction: row;
 +
          flex-direction: row;
 +
  -webkit-box-pack: center;
 +
      -ms-flex-pack: center;
 +
          justify-content: center;
 +
  -webkit-box-align: center;
 +
      -ms-flex-align: center;
 +
          align-items: center;
 +
  width: 20px;
 +
  height: 20px;
 +
  cursor: pointer;
 +
  padding: 28px;
 +
  border: 3px solid white;
 +
  border-radius: 100%;
 +
  -webkit-box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.3);
 +
          box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.3);
 +
}
 +
#bodyContent a.close {
 +
  background: #149375;
 +
  color: white;
 +
  -webkit-transition: all 0.5s ease;
 +
  -o-transition: all 0.5s ease;
 +
  transition: all 0.5s ease;
 +
}
 +
#bodyContent a.close:visited {
 +
  color: white;
 +
}
 +
#bodyContent a.close:link {
 +
  color: white;
 +
}
 +
#bodyContent a.close:hover {
 +
  border: 3px solid black;
 +
  color: black;
 
}
 
}
  
 +
/************************************************************************
 +
image carousel
 +
************************************************************************/
 +
#bodyContent .slider{
 +
  position:relative;
 +
}
 +
#bodyContent .slide{
 +
    -webkit-transition: opacity 2s linear;
 +
    -o-transition: opacity 2s linear;
 +
    transition: opacity 2s linear;
 +
    padding:0;
 +
}
  
  
 +
#bodyContent .slider button {
 +
    position: absolute;
 +
    top: 0;
 +
    border: none;
 +
    height: 100%;
 +
    width: 50px;
 +
    cursor: pointer;
 +
    background: hsla(0, 0%, 50%, 0.5);
 +
}
 +
#bodyContent .slider button:hover{
 +
  background: hsla(0, 0%, 0%, 0.5);
 +
}
  
 +
#bodyContent .btn-left{
 +
  left:0;
 +
}
 +
#bodyContent .btn-right{
 +
  right:0;
 +
}
  
 +
/************************************************************************
 +
Misc elements
 +
************************************************************************/
 +
/************************************************************************
 +
Upwards arrow
 +
************************************************************************/
 +
#bodyContent #returnToTop {
 +
  position: fixed;
 +
  font-size: 35pt;
 +
  right: 3vw;
 +
  bottom: 3vw;
 +
  display: block;
 +
  text-decoration: none;
 +
  color: rgba(0, 0, 0, 0.6);
 +
  -webkit-transition: all 2s ease;
 +
  -o-transition: all 2s ease;
 +
  transition: all 2s ease;
 +
}
  
 +
#bodyContent #returnToTop:hover{
 +
  color: black;
 +
}
  
 +
/************************************************************************
 +
Loader
 +
************************************************************************/
 +
#loader-wrapper {
 +
    position: fixed;
 +
    top: 0;
 +
    left: 0;
 +
    width: 100%;
 +
    height: 100%;
 +
    z-index: 1000;
 +
}
 +
#loader {
 +
    display: block;
 +
    position: relative;
 +
    left: 50%;
 +
    top: 50%;
 +
    width: 150px;
 +
    height: 150px;
 +
    margin: -75px 0 0 -75px;
 +
    border-radius: 50%;
 +
    border: 3px solid transparent;
 +
    border-top-color: #0e6752;
  
 +
    -webkit-animation: spin 2s linear infinite;
 +
    animation: spin 2s linear infinite;
  
−
/****************** MEDIA QUERIES **
+
    z-index: 1001;
−
**********************************/
+
−
 
+
−
@media (max-width: 768px){
+
−
body{
+
−
background: white;
+
−
}
+
−
#sidebar-btn {
+
−
right: 0;
+
−
top: 18px;
+
−
width: 100%;
+
−
height: 50px;
+
−
cursor: pointer;
+
−
background: #1C1E1F;
+
−
padding: 0 5% 0 0;
+
−
border: none;
+
−
border-radius: 0;
+
−
justify-content: flex-end;
+
−
}
+
−
#sidebar-btn:hover{
+
−
border: none;
+
−
}
+
−
#sidebar-btn:hover i{
+
−
color: #149375;
+
−
}
+
−
#container {
+
−
margin-top: 68px;
+
−
padding: 0;
+
−
}
+
−
#container.inactive{
+
−
transform: translate(250px,0)
+
−
}
+
−
#sidebar-btn.inactive{
+
−
#background: rgba(0,0,0,0.5);
+
−
}
+
−
section#gallery .col2 {
+
−
flex-direction:column;
+
−
}
+
−
section#gallery .col2 > div {
+
−
width: 100%;
+
−
}
+
 
}
 
}
  
−
@media (min-width: 1024px){
+
    #loader:before {
−
section#footer i {
+
        content: "";
−
font-size: 3vw;
+
        position: absolute;
−
}
+
        top: 5px;
−
}
+
        left: 5px;
 +
        right: 5px;
 +
        bottom: 5px;
 +
        border-radius: 50%;
 +
        border: 3px solid transparent;
 +
        border-top-color: #149375;
 +
 
 +
        -webkit-animation: spin 3s linear infinite;
 +
        animation: spin 3s linear infinite;
 +
    }
 +
 
 +
    #loader:after {
 +
        content: "";
 +
        position: absolute;
 +
        top: 15px;
 +
        left: 15px;
 +
        right: 15px;
 +
        bottom: 15px;
 +
        border-radius: 50%;
 +
        border: 3px solid transparent;
 +
        border-top-color: #1ac19a;
 +
 
 +
        -webkit-animation: spin 1.5s linear infinite;
 +
          animation: spin 1.5s linear infinite;
 +
    }
 +
 
 +
    @-webkit-keyframes spin {
 +
        0%  {
 +
            -webkit-transform: rotate(0deg);
 +
            -ms-transform: rotate(0deg);
 +
            transform: rotate(0deg);
 +
        }
 +
        100% {
 +
            -webkit-transform: rotate(360deg);
 +
            -ms-transform: rotate(360deg);
 +
            transform: rotate(360deg);
 +
        }
 +
    }
 +
    @keyframes spin {
 +
        0%  {
 +
            -webkit-transform: rotate(0deg);
 +
            -ms-transform: rotate(0deg);
 +
            transform: rotate(0deg);
 +
        }
 +
        100% {
 +
            -webkit-transform: rotate(360deg);
 +
            -ms-transform: rotate(360deg);
 +
            transform: rotate(360deg);
 +
        }
 +
    }
 +
 
 +
    #loader-wrapper .loader-section {
 +
        position: fixed;
 +
        top: 0;
 +
        width: 51%;
 +
        height: 100%;
 +
        background: #222222;
 +
        z-index: 1000;
 +
        -webkit-transform: translateX(0);
 +
        -ms-transform: translateX(0);
 +
        transform: translateX(0);
 +
    }
 +
 
 +
    #loader-wrapper .loader-section.section-left {
 +
        left: 0;
 +
    }
 +
 
 +
    #loader-wrapper .loader-section.section-right {
 +
        right: 0;
 +
    }
 +
 
 +
    /* Loaded */
 +
    .loaded #loader-wrapper .loader-section.section-left {
 +
        -webkit-transform: translateX(-100%);
 +
            -ms-transform: translateX(-100%);
 +
                transform: translateX(-100%);
 +
        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
 +
                -o-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
 +
                transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
 +
    }
 +
 
 +
    .loaded #loader-wrapper .loader-section.section-right {
 +
        -webkit-transform: translateX(100%);
 +
            -ms-transform: translateX(100%);
 +
                transform: translateX(100%);
 +
 
 +
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
 +
        -o-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
 +
        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
 +
    }
 +
 
 +
    .loaded #loader {
 +
        opacity: 0;
 +
        -webkit-transition: all 0.3s ease-out;
 +
                -o-transition: all 0.3s ease-out;
 +
                transition: all 0.3s ease-out;
 +
    }
 +
    .loaded #loader-wrapper {
 +
        visibility: hidden;
 +
 
 +
        -webkit-transform: translateY(-100%);
 +
            -ms-transform: translateY(-100%);
 +
                transform: translateY(-100%);
 +
        -webkit-transition: all 0.3s 1s ease-out;
 +
                -o-transition: all 0.3s 1s ease-out;
 +
                transition: all 0.3s 1s ease-out;
 +
    }
 +
    /* JavaScript Turned Off */
 +
    .no-js #loader-wrapper {
 +
        display: none;
 +
    }
 +
 
 +
    #myCanvas{
 +
      position:fixed;
 +
      top: 0;
 +
      bottom: 0;
 +
      left: 0;
 +
      right: 0;
 +
      z-index: -1;
 +
    }
  
  
 
</style>
 
</style>
 +
</head>
 
</html>
 
</html>

Latest revision as of 20:31, 1 November 2017