Difference between revisions of "Team:Bulgaria/safety.html"

Line 7: Line 7:
 
</head>
 
</head>
 
<style>
 
<style>
 +
 
#top_menu_under {
 
#top_menu_under {
 
   display: none;
 
   display: none;
Line 128: Line 129:
 
#bodyContent {
 
#bodyContent {
 
}
 
}
 +
/************************************************************************
 +
Page sections
 +
************************************************************************/
 +
#bodyContent article{
 +
    width:90%;
 +
    margin: auto;
 +
    padding: 8% 0;
 +
}
 +
 +
#bodyContent .frontpage{
 +
    width: 100%;
 +
    margin: 0% 0;
 +
    padding: 5%;
 +
    padding-top: 0%;
 +
    background: white;
 +
    box-shadow: 0 -20px 20px 20px white;
 +
}
 +
 +
@media (min-width: 1024px) {
 +
  #bodyContent article{
 +
    width: 85%;
 +
    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;
 +
}
 +
 +
@media (min-width: 1024px){
 +
  #ToC{
 +
    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;}
 +
 +
#bodyContent nav {
 +
  display:none;
 +
  position: fixed;
 +
  background-color: white;
 +
  -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.3);
 +
          box-shadow: 0 5px 15px rgba(0,0,0,0.3);
 +
  left: 0;
 +
  right: 0;
 +
  top: 16px;
 +
  z-index: 50;
 +
}
 +
 +
@media (min-width: 1024px) {
 +
  #bodyContent nav{
 +
    display:-webkit-box;
 +
    display:-ms-flexbox;
 +
    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;
 +
}
 +
 +
#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;
 +
}
 +
 +
 +
#bodyContent .menu li a:hover {
 +
  background: #ccc;
 +
  color: #fff;
 +
}
 +
 +
#bodyContent .menu-item-has-children > a:after {
 +
  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;
 +
}
 +
 +
#bodyContent nav ul li:hover > ul {
 +
  display: block;
 +
  color: #fff;
 +
  padding-left: 0;
 +
  background: #777;
 +
}
 +
 +
#bodyContent nav ul li:hover > ul a {
 +
  color: #fff;
 +
}
 +
 +
#bodyContent .sub-menu li {
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
  width: 340px;
 +
}
 +
#bodyContent .sub-menu li:hover,
 +
#bodyContent .sub-menu li a:hover {
 +
  background: #ddd;
 +
  color: #777;
 +
}
 +
 +
#bodyContent nav ul ul ul {
 +
  margin: 0 0 0 100%;
 +
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
 +
          box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
 +
}
 +
 +
#bodyContent .menu-item-has-children .menu-item-has-children:hover > a:after {
 +
  -webkit-transform: rotate(-90deg);
 +
      -ms-transform: rotate(-90deg);
 +
          transform: rotate(-90deg);
 +
  -webkit-transform-origin: 50% 60%;
 +
      -ms-transform-origin: 50% 60%;
 +
          transform-origin: 50% 60%;
 +
}
 +
 +
/************************************************************************
 +
Navigation Button
 +
************************************************************************/
 +
#bodyContent #sidebar-btn {
 +
  width: 100%;
 +
  height: 50px;
 +
  padding: 0 5vw 0 0;
 +
  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;  }
 +
 +
#bodyContent #sidebar-btn i {
 +
  -webkit-transition: color 1s ease;
 +
  -o-transition: color 1s ease;
 +
  transition: color 1s ease;
 +
}
 +
#bodyContent #sidebar-btn:hover i {
 +
  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;
 +
  }
 +
}
 +
/************************************************************************
 +
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;
 +
}
 +
#bodyContent #sidebar.visible {
 +
  visibility: visible;
 +
  opacity: 1;
 +
}
 +
#bodyContent #sidebar ul {
 +
  margin: 0px;
 +
  padding: 0px;
 +
}
 +
#bodyContent #sidebar ul li {
 +
  list-style: none;
 +
  -webkit-transition: all 0.5s ease;
 +
  -o-transition: all 0.5s ease;
 +
  transition: all 0.5s ease;
 +
  margin: 0;
 +
  padding: 0;
 +
  text-indent: 0;
 +
}
 +
 +
#bodyContent #sidebar ul li::before{
 +
    content: none;
 +
    padding-right: 0;
 +
 +
}
 +
#bodyContent #sidebar ul li a {
 +
  font-size: 1rem;
 +
  background: #1C1E1F;
 +
  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 {
 +
  background-color: rgba(255, 255, 255, 0.3)
 +
}
 +
#bodyContent #sidebar ul ul a {
 +
  font-size: 1rem;
 +
  background: #1C1E1F;
 +
  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 ul a:hover {
 +
  background-color: rgba(255, 255, 255, 0.3)
 +
}
 +
#bodyContent #sidebar ul ul.sub li {
 +
  display: none;
 +
  padding-left: 15px;
 +
}
 +
#bodyContent #sidebar ul ul.sub li.active {
 +
  display: block;
 +
}
 +
#bodyContent #overlay {
 +
  position: fixed;
 +
  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);
 +
}
 +
 +
/************************************************************************
 +
General page styles
 +
************************************************************************/
 +
#bodyContent img {
 +
  display: block;
 +
  max-width: 100%;
 +
  padding: 20px;
 +
  margin: 20px auto;
 +
}
 +
 +
@media (min-width: 1024px){
 +
  #bodyContent .floatleft{
 +
    float:left;
 +
    margin:0;
 +
  }
 +
 +
  #bodyContent .floatright{
 +
      float:right;
 +
      margin:0;
 +
  }
 +
  #bodyContent img.nomargin{
 +
    margin:0;
 +
  }
 +
 +
}
 +
 +
#bodyContent svg {
 +
  display:block;
 +
}
 +
 +
#bodyContent svg.fullscreen{
 +
    padding: 10% 0;
 +
    margin: 0 5%;
 +
}
 +
 +
#bodyContent video{
 +
  max-width:100%;
 +
  margin: 5% auto;
 +
}
 +
 +
#bodyContent .max-width {
 +
  width: 100%;
 +
}
 +
 +
#bodyContent .limited-height{
 +
    max-height: 500px;
 +
    width: auto;
 +
}
 +
 +
#bodyContent .half-width{
 +
  width:100%;
 +
  margin:5% auto;
 +
}
 +
 +
#bodyContent .quarter-width{
 +
  width:100%;
 +
  margin:5% auto;
 +
}
 +
 +
 +
@media (min-width: 1024px){
 +
  #bodyContent .half-width{
 +
    width:50%;
 +
  }
 +
  #bodyContent .quarter-width{
 +
    width:25%;
 +
}
 +
}
 +
 +
#bodyContent h1,h2,h3,h4,h5,h6 {
 +
  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;
 +
}
 +
 +
@media (min-width: 1024px) {
 +
  #bodyContent h1{
 +
  text-transform: uppercase;
 +
  font-size: 6.854rem;
 +
  border-left: 5px solid #149375;
 +
  padding: 0 20px;
 +
  }
 +
}
 +
 +
#bodyContent h2 {
 +
  font-size: 2.488rem;
 +
  margin: 18px 0;
 +
  padding: 0;
 +
}
 +
 +
@media (min-width: 1024px) {
 +
  #bodyContent h2{
 +
    font-size:4.236rem;
 +
    }
 +
  }
 +
 +
#bodyContent h3 {
 +
  font-size: 2.074rem;
 +
  margin: 16px 0;
 +
  padding: 0;
 +
}
 +
 +
@media (min-width: 1024px) {
 +
  #bodyContent h3{
 +
    font-size:2.618rem;
 +
  }
 +
}
 +
#bodyContent h4 {
 +
  font-size: 1.728rem;
 +
  margin: 14px 0;
 +
  padding: 0;
 +
}
 +
@media (min-width: 1024px) {
 +
  #bodyContent h4{
 +
    font-size:1.618rem;
 +
  }
 +
}
 +
#bodyContent h5 {
 +
  font-size: 1.44rem;
 +
  margin: 12px 0;
 +
  padding: 0;
 +
}
 +
#bodyContent h6 {
 +
  font-size: 1.2rem;
 +
  margin: 10px 0;
 +
  padding: 0;
 +
}
 +
 +
#bodyContent h1 a {font-size: inherit;}
 +
#bodyContent h2 a {font-size: inherit;}
 +
#bodyContent h3 a {font-size: inherit;}
 +
#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{}
 +
 +
#bodyContent abbr {
 +
  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;
 +
}
 +
 +
#bodyContent pre {
 +
      display:block;
 +
      overflow-x: auto;
 +
      background: rgba(0,0,0,0);
 +
      padding: 20px;
 +
      width: 100%;
 +
      border: none;
 +
      line-height: 1;
 +
  }
 +
#bodyContent code {
 +
    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;
 +
}
 +
 +
#bodyContent figcaption {
 +
  font-family: 'Quicksand', sans-serif;
 +
  font-size: 0.75rem;;
 +
  padding-left: 20px;
 +
  font-style: italic;
 +
}
 +
 +
#bodyContent figcaption a{
 +
  font-size: 0.75rem;;
 +
}
 +
 +
#bodyContent figcaption abbr{
 +
  font-size: 0.75rem;;
 +
}
 +
 +
#bodyContent .flex-row-2{
 +
    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-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;
 +
  }
 +
}
 +
 +
  /************************************************************************
 +
  Special Text
 +
  ************************************************************************/
 +
  /* label */
 +
  span.label {
 +
    display: inline-block;
 +
    padding: 0 6px;
 +
    border-radius: 20px;
 +
    white-space: nowrap;
 +
    cursor: default;
 +
    background: #149375;
 +
    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;
 +
  }
 +
}
 +
 +
#bodyContent table th{
 +
  border: none;
 +
  background-color: rgba(20, 147, 117, 0.5);
 +
  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;
 +
}
 +
 +
@media (min-width: 1024px){
 +
  #bodyContent table tbody td{
 +
    display: table-cell;
 +
    padding: 10px;
 +
    border-collapse: collapse;
 +
    vertical-align: middle;
 +
  }
 +
  #bodyContent table tbody td:before{
 +
    content:none;
 +
  }
 +
}
 +
 +
#bodyContent table tr{
 +
  background-color: rgba(0,0,0,0);
 +
  -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){
 +
 +
  #bodyContent table th:first-child{
 +
    border-radius: 10px 0 0 10px;
 +
  }
 +
  #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;
 +
  }
 +
}
 +
/************************************************************************
 +
Lists
 +
************************************************************************/
 +
#bodyContent ul {
 +
  list-style-type: none;
 +
  list-style-image: none;
 +
  color: black;
 +
  margin: 2rem 0 2rem 3rem;
 +
  padding: 0;
 +
  line-height: 1.5;
 +
}
 +
 +
#bodyContent ol {
 +
  color: black;
 +
  margin: 2rem 0 2rem 3rem;
 +
  padding: 0;
 +
  line-height: 1.5;
 +
}
 +
 +
#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;
 +
}
 +
#bodyContent li::before {
 +
  content: "•";
 +
  color: #149375;
 +
  padding-right: 7px;
 +
}
 +
 +
#bodyContent ul.eric{
 +
    display: flex;
 +
    flex-direction: column;
 +
}
 +
 +
#bodyContent ul.eric li{
 +
    text-indent: 0;
 +
}
 +
 +
 +
#bodyContent ul.eric li::before {
 +
    content: "";
 +
    color: #149375;
 +
    float: left;
 +
    padding-right: 10px;
 +
    display: block;
 +
    height: 32px;
 +
    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;
 +
}
 +
 +
#bodyContent ol li::before {
 +
  content: none;
 +
}
 +
#bodyContent a {
 +
  font-family: 'Quicksand', sans-serif;
 +
  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;
 +
}
 +
#bodyContent a:hover {
 +
  color: #0e6752;
 +
}
 +
#bodyContent a:active {
 +
  color: #0e6752;
 +
}
 +
#bodyContent a:visited {
 +
  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;
 +
  }
 +
}
 +
 +
#bodyContent .flex-gallery div {
 +
  width: 200px;
 +
  height: auto;
 +
  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;
 +
}
 +
 +
#bodyContent .flex-gallery img {
 +
  max-width: 100%;
 +
  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;
 +
 +
    z-index: 1001;
 +
}
 +
 +
    #loader:before {
 +
        content: "";
 +
        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;
 +
    }
 +
 +
 +
  
 
html *{
 
html *{

Revision as of 21:02, 16 October 2018

PROJECT USE IS IT SAFE USED ORGANISM STRAINS POTENTIAL RISKS WASTE TREATMENT EMERGENCY REACTIONS PROTECTIVE EQUIPMENT OTHER RULES

WHO WILL USE OUR PRODUCT

Our target audience consists of scientists and clinicians interested in the detection of the Delta F508 mutation , responsible for approximately 70% of the Cystic Fibrosis cases in Bulgaria and Europe as a whole. Our system is pla nned to be used only in a controlled environment.

IS IT SAFE?

Not only is it safer than any other technology that does the same thing, but it is also drastically cheaper and vastly beneficial due to its simplicity - it does not require DNA sequencing for the detection step.

USED ORGANISM STRAINS

# Escherichia coli - DH5α strain
# Escherichia coli - TOP10 strain

POTENTIAL RISKS

Our project poses the typical risks of working with a level 1 GMO.

WASTE TREATMENT

All biological materials and equipment used for handling were collected separately and autoclaved.

EMERGENCY REACTIONS

If lab coats or clothes start burning:
emergency showers
If acids or other harmful liquids get in the eyes:
eye showers
If injuries occur:
treat them with first aid-kits, report the injury, go to the hospital if necessary
If solutions with GMO are running down the bench:
swap and disinfect the place with NaClO (bleach)

PROTECTIVE EQUIPMENT

Eye protection
Lab coats
Safety glasses in special areas of the lab
(should be used in other areas if necessary)

OTHER RULES

Do not work alone!
There should be at least one person in the lab with you.

Do not pipette with your mouth!

Disinfect hands after contamination with GMOs!

Disinfect hands and wash them after working in the lab!

Do not eat, swallow, wash and snore with any chemicals!

Do not bring food, drinks, pets and snacks in the lab!

Be sure that you have informed the instructor of the next step of the experiment plan and gotten the permission of him!

Record the general nature of the work clearly in your lab journal!