Difference between revisions of "Template:SCSU-New Haven/css/dev"

Line 1: Line 1:
−
/* Yleiset */
 
  
−
a:link, a:visited, a:active, .right-menu li a {
+
@font-face {
−
   color: #0AA699;
+
   font-family: Aref Ruqaa;
−
   text-decoration: none !important;
+
  font-weight: 300;
 +
   font-style: normal;
 
}
 
}
−
 
+
@font-face {
−
a:hover {
+
  font-family: Harmattan;
−
   color: #90F0E8;
+
  font-weight: 400;
 +
   font-style: normal;
 
}
 
}
−
 
+
@font-face {
−
body {
+
   font-family: Raleway;
−
   color: black;
+
   font-weight: 400;
−
   background-color: white;
+
   font-style: normal;
−
   margin: 0;
+
−
  padding: 0;
+
−
  word-wrap: break-word;
+
 
}
 
}
−
 
+
@font-face {
−
ul {
+
   font-family: Reem Kufi;
−
   list-style-image: none;
+
  font-weight: 400;
 +
  font-style: normal;
 
}
 
}
−
 
+
html,
−
#references > li {
+
body,
−
   margin-bottom: 1em;
+
div,
 +
p {
 +
   font-family: Harmattan;
 +
  font-size: 14px;
 +
  -webkit-font-smoothing: antialiased;
 +
  -moz-osx-font-smoothing: grayscale;
 
}
 
}
−
 
+
a {
−
.cpright {
+
   outline: none;
−
   text-align: right;
+
   color: #9e9ba4;
−
   padding-right: 1em;
+
  text-decoration: none;
 
}
 
}
−
 
+
a:hover {
−
.smallerimg {
+
   color: #f9f9f9;
−
   width: 50%;
+
  text-decoration: none;
 
}
 
}
−
 
+
a:focus {
−
.modellatex, .modelimg {
+
   outline: none;
−
   padding-top: 2em;
+
   text-decoration: none;
−
   padding-bottom: 1.5em;
+
 
}
 
}
−
 
+
h1 {
−
@media only screen and (min-width : 992px) {
+
   font-family: Reem Kufi;
−
   article {
+
−
    padding-top: 5px;
+
−
    padding-bottom: 5%;
+
−
    padding-left: 15%;
+
−
    padding-right: 15%;
+
−
    font-size: 16px;
+
−
  }
+
−
 
+
−
  .modelimg {
+
−
    display: none;
+
−
  }
+
 
}
 
}
−
 
+
h2 {
−
@media only screen and (max-width : 992px) {
+
   font-size: 3em;
−
   .modellatex {
+
−
    display: none;
+
−
  }
+
 
}
 
}
−
 
+
article,
−
.link {
+
aside,
−
   padding-top: 50px;
+
details,
 +
figcaption,
 +
figure,
 +
footer,
 +
header,
 +
hgroup,
 +
nav,
 +
section,
 +
summary {
 +
   display: block;
 
}
 
}
−
 
+
audio,
−
.paddingtop {
+
canvas,
−
   padding-top: 100px;
+
video {
 +
   display: inline-block;
 
}
 
}
−
 
+
audio:not([controls]) {
−
h3, h4, h5, h6 {
+
   display: none;
−
   font-family: "Helvetica Neue", Helvetica, sans-serif;
+
   height: 0;
−
  border-bottom: none;
+
−
   padding-top: 3em;
+
−
  padding-bottom: 1em;
+
 
}
 
}
−
 
+
[hidden] {
−
h1 {
+
   display: none;
−
   font-family: "Helvetica Neue", Helvetica, sans-serif;
+
−
  border-bottom: none;
+
−
  font-size: 6em;
+
 
}
 
}
−
 
+
html {
−
h2 {
+
   font-family: sans-serif;
−
   font-family: "Helvetica Neue", Helvetica, sans-serif;
+
   -webkit-text-size-adjust: 100%;
−
   border-bottom: none;
+
   -ms-text-size-adjust: 100%;
−
  font-size: 2.5em;
+
−
  padding-top: 1em;
+
−
   padding-bottom: 0.3em;
+
−
  text-align: center;
+
 
}
 
}
−
 
+
a:focus {
−
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small,
+
   outline: thin dotted;
−
.h1 small, .h2 small, .h3 small, .h4 small, .h5 small,
+
−
.h6 small, h1 .small, h2 .small, h3 .small, h4 .small,
+
−
h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small,
+
−
.h4 .small, .h5 .small, .h6 .small {
+
−
   line-height: inherit;
+
−
  color: rgba(100, 153, 148, 1);
+
 
}
 
}
−
 
+
a:active,
−
#bodyContent h1, #bodyContent h2 {
+
a:hover {
−
   margin-bottom: 0;
+
   outline: 0;
 
}
 
}
−
 
+
h1 {
−
blockquote {
+
   font-size: 2em;
−
  font-style: italic;
+
−
  position: relative;
+
−
  border-left: none;
+
−
  line-height: 1.8;
+
−
   font-size: 1.3em;
+
−
  padding: 0 0 0 120px;
+
−
  margin: 2em 0 2em 0;
+
 
}
 
}
−
 
+
abbr[title] {
−
blockquote:before {
+
   border-bottom: 1px dotted;
−
   display: block;
+
−
  content: "\201C";
+
−
  font-size: 200px;
+
−
  position: absolute;
+
−
  left: 0;
+
−
  top: -115px;
+
−
  font-family: cursive;
+
 
}
 
}
−
 
+
b,
−
blockquote cite {
+
strong {
−
  color: rgba(51, 97, 93, 1);
+
   font-weight: 700;
−
   font-size: 0.6em;
+
−
  display: block;
+
−
  margin-top: 0.5em;
+
 
}
 
}
−
 
+
dfn {
−
blockquote cite:before {
+
   font-style: italic;
−
   content: "\2014 \2009";
+
 
}
 
}
−
 
+
mark {
−
/* Yleiset päättyy */
+
  background: #ff0;
−
 
+
   color: #000;
−
 
+
−
/* Header- ja pikkuvalikkojutut */
+
−
 
+
−
.navbar{
+
−
   margin-top: 0;
+
 
}
 
}
−
 
+
code,
−
header {
+
kbd,
−
   color: white;
+
pre,
−
   font-size: large;
+
samp {
 +
   font-family: monospace, serif;
 +
   font-size: 1em;
 
}
 
}
−
 
+
pre {
−
@media only screen and (min-width : 992px) {
+
   white-space: pre-wrap;
−
   header a {
+
  word-wrap: break-word;
−
    padding-right: 1vw;
+
−
    padding-left: 1vw;
+
−
  }
+
 
}
 
}
−
 
+
q {
−
header a.active, .extrabar a.active {
+
   quotes: 2 1C 2 1D 2 18 2 19;
−
   color:black;
+
 
}
 
}
−
 
+
small {
−
header .navbar, .extrabar {
+
   font-size: 80%;
−
   background-color:rgba(255,255,255,0.8);
+
−
  border:0px;
+
−
  border-radius: 0;
+
 
}
 
}
−
 
+
sub,
−
header .navbar {
+
sup {
−
   padding-top: 12px;
+
   font-size: 75%;
−
   padding-bottom: 12px;
+
   line-height: 0;
−
   min-height: 30px;
+
   position: relative;
−
   border-radius: 0px;
+
   vertical-align: baseline;
 
}
 
}
−
 
+
sup {
−
.extrabar {
+
   top: -0.5em;
−
   width:100%;
+
−
  text-align: center;
+
−
  padding-top: 0px;
+
−
  padding-bottom: 5px;
+
−
  min-height: 20px;
+
−
  border-radius: 0px;
+
−
  z-index:1;
+
 
}
 
}
−
 
+
sub {
−
.extrabar a {
+
   bottom: -0.25em;
−
   padding-left: 0.5em;
+
−
  padding-right: 0.5em;
+
 
}
 
}
−
 
+
img {
−
.affix {
+
   border: 0;
−
   top: 45px;
+
−
  width: 100%;
+
 
}
 
}
−
 
+
svg:not(:root) {
−
.affix-top {
+
   overflow: hidden;
−
   float:left;
+
−
  visibility: hidden;
+
 
}
 
}
−
 
+
fieldset {
−
/* Header päättyy */
+
   border: 1px solid #c0c0c0;
−
 
+
   margin: 0 2px;
−
 
+
   padding: 0.35em 0.625em 0.75em;
−
/* Pakolliset pikku valikot ja parts*/
+
−
 
+
−
#top-section {
+
−
  height: 0;
+
−
  width: 100%;
+
−
  left: 0;
+
−
   border: none;
+
−
   margin: 0 auto;
+
−
   padding: 0 0 0 0;
+
−
  background-color: transparent;
+
−
  position: absolute;
+
 
}
 
}
−
 
+
button,
−
#menubar {
+
input,
−
   width: 300px;
+
select,
−
   top: 0px;
+
textarea {
−
   font-size: x-small;
+
   font-family: inherit;
 +
   font-size: 100%;
 +
   margin: 0;
 
}
 
}
−
 
+
button,
−
#menubar, #menubar a {
+
input {
−
   color: #0AA699;
+
   line-height: normal;
 
}
 
}
−
 
+
button,
−
#menubar, #menubar a:hover {
+
html input[type=button],
−
   color: #90F0E8;
+
input[type=reset],
 +
input[type=submit] {
 +
   -webkit-appearance: button;
 +
  cursor: pointer;
 
}
 
}
−
 
+
button[disabled],
−
#menubar:hover, #menubar li a {
+
input[disabled] {
−
   background-color: transparent;
+
   cursor: default;
 
}
 
}
−
 
+
input[type=checkbox],
−
#groupparts {
+
input[type=radio] {
−
   min-height: 0;
+
   box-sizing: border-box;
−
  min-width: 0;
+
−
}
+
−
 
+
−
/* Pakolliset pikku valikot ja parts päättyy */
+
−
 
+
−
 
+
−
/* Kuvien ja rivien asettelua */
+
−
 
+
−
.row {
+
−
  overflow: hidden;
+
−
  position: relative;
+
−
  width: 100%;
+
−
  margin: 1em 0;
+
 
   padding: 0;
 
   padding: 0;
 
}
 
}
−
 
+
input[type=search] {
−
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
+
  -webkit-appearance: textfield;
−
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
+
  -moz-box-sizing: content-box;
−
   padding: 0;
+
  -webkit-box-sizing: content-box;
 +
   box-sizing: content-box;
 
}
 
}
−
 
+
input[type=search]::-webkit-search-cancel-button,
−
.col-md-2 h3, .col-md-4 h3, .col-md-6 h3, .col-md-8 h3,
+
input[type=search]::-webkit-search-decoration {
−
.col-md-2 h4, .col-md-4 h4, .col-md-6 h4, .col-md-8 h4,
+
   -webkit-appearance: none;
−
.col-md-2 h5, .col-md-4 h5, .col-md-6 h5, .col-md-8 h5 {
+
−
   margin-top: 0em;
+
 
}
 
}
−
 
+
textarea {
−
.memberrow {
+
   overflow: auto;
−
   margin-top: 2em;
+
   vertical-align: top;
−
   margin-bottom: 2em;
+
 
}
 
}
−
 
+
table {
−
#laurakuva, #lassikuva, #minttukuva, #oskarikuva, #pietukuva, #mikkokuva,
+
   border-collapse: collapse;
−
#niklaskuva, #ottokuva, #martinakuva, #advisorskuvat {
+
  border-spacing: 0;
−
   width: auto;
+
 
}
 
}
−
 
+
body,
−
.university-title {
+
figure {
−
   padding-top: 0;
+
   margin: 0;
 
}
 
}
−
 
+
legend,
−
.margintop {
+
button::-moz-focus-inner,
−
   margin-top: 2em;
+
input::-moz-focus-inner {
 +
   border: 0;
 +
  padding: 0;
 
}
 
}
−
 
+
.clearfix:after {
−
.nopaddingtop {
+
   visibility: hidden;
−
   padding-top: 0;
+
  display: block;
 +
  font-size: 0;
 +
  content: " ";
 +
  clear: both;
 +
  height: 0;
 
}
 
}
−
 
+
* {
−
.nopaddingbottom {
+
   -moz-box-sizing: border-box;
−
   padding-bottom: 0;
+
  -webkit-box-sizing: border-box;
 +
  box-sizing: border-box;
 
}
 
}
−
 
+
* {
−
.ykspaddingbottom {
+
  -webkit-box-sizing: border-box;
−
   padding-bottom: 1em;
+
  -moz-box-sizing: border-box;
 +
  -o-box-sizing: border-box;
 +
  box-sizing: border-box;
 +
  -webkit-transition: 0.25s ease-in-out;
 +
   -moz-transition: 0.25s ease-in-out;
 +
  -o-transition: 0.25s ease-in-out;
 +
  transition: 0.25s ease-in-out;
 +
  margin: 0;
 +
  padding: 0;
 
}
 
}
−
 
+
#drawer-toggle:checked ~ #drawer-toggle-label {
−
.kakspaddingbottom {
+
   height: 100 $;
−
   padding-bottom: 2em;
+
  width: calc(100% - 300px);
 +
  background: rgba(255,255,255,0.8);
 +
  left: 300px;
 
}
 
}
−
 
+
#drawer-toggle:checked ~ header {
−
.kakspaddingtop {
+
   left: 300px;
−
   padding-top: 2em;
+
 
}
 
}
−
 
+
#drawer-toggle:checked ~ #drawer {
−
.text-col-right {
+
   left: 0px;
−
   padding-left: 2em;
+
 
}
 
}
−
 
+
#drawer-toggle:checked ~ #page-content {
−
.text-col-left {
+
   margin-left: 300px;
−
   padding-right: 2em;
+
 
}
 
}
−
 
+
#drawer ul {
−
.img-100 .img-responsive {
+
  list-style-type: none;
−
  width: 100%;
+
 
}
 
}
−
 
+
#drawer ul a {
−
.kuvateksti {
+
   display: block;
−
   font-size: small;
+
   padding: 10px;
−
   margin-top: 1em;
+
  color: #c7c7c7;
−
   margin-bottom: 3em;
+
   text-decoration: none;
 
}
 
}
−
 
+
#drawer ul a:hover {
−
.img-center {
+
   color: #fff;
−
   text-align: center;
+
−
  margin-top: 2em;
+
 
}
 
}
−
 
+
@media all and (max-width: 350px) {
−
.img-center .img-responsive {
+
  #drawer-toggle:checked ~ #drawer-toggle-label {
−
   display: inline;
+
    height: 100%;
 +
    width: 50px;
 +
   }
 +
  #drawer-toggle:checked ~ #drawer-toggle-label,
 +
  #drawer-toggle:checked ~header {
 +
    left: calc(100% - 50px);
 +
  }
 +
  #drawer-toggle:checked ~ drawer {
 +
    width: calc(100% - 50px);
 +
    padding: 20px;
 +
  }
 +
  #drawer-toggle:checked ~ #page-content {
 +
    margin-left: calc(100% - 50px);
 +
  }
 
}
 
}
−
 
+
.kukuri {
−
.bg {
+
   text-transform: uppercase;
−
   background-size: cover;
+
 
   overflow: hidden;
 
   overflow: hidden;
 +
  display: inline-block;
 
}
 
}
−
 
+
.kukuri::before {
−
/* Featured */
+
  content: attr(data-letters);
−
.feat {
+
  position: absolute;
−
   opacity: 0.95;
+
  z-index: 2;
 +
  overflow: hidden;
 +
  color: #424242;
 +
  white-space: nowrap;
 +
  width: 0%;
 +
  -webkit-transition: width 0.4s 0.3s;
 +
   transition: width 0.4s 0.3s;
 
}
 
}
−
 
+
.kukuri::after {
−
.feat:hover {
+
   content: '';
−
   opacity: 1.0;
+
   position: absolute;
−
}
+
   height: 16px;
−
 
+
−
.feattext-container-tall {
+
−
   display: table;
+
−
   height: 400px;
+
 
   width: 100%;
 
   width: 100%;
 +
  top: 50%;
 +
  margin-top: -8px;
 +
  right: 0;
 +
  background: #f9f9f9;
 +
  -webkit-transform: translate3d(-100%, 0, 0);
 +
  transform: translate3d(-100%, 0, 0);
 +
  -webkit-transition: -webkit-transform 0.4s;
 +
  transition: transform 0.4s;
 +
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
 +
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
 
}
 
}
−
 
+
.kukuri:hover::before {
−
.feattext-container-wide {
+
−
  display: table;
+
−
  height: 300px;
+
 
   width: 100%;
 
   width: 100%;
 
}
 
}
−
 
+
.kukuri:hover::after {
−
.feattext-cell {
+
   -webkit-transform: translate3d(100%, 0, 0);
−
   display: table-cell;
+
   transform: translate3d(100%, 0, 0);
−
  vertical-align: bottom;
+
−
   width: 100%;
+
 
}
 
}
−
 
+
html,
−
.feattext-p {
+
body {
−
   background-color: rgba(95, 95, 95, 0.42);
+
   height: 100%;
−
   margin-bottom: -0.5em;
+
   overflow: hidden;
−
  padding: 0.5em;
+
−
  padding-bottom: 0.75em;
+
−
  color: white;
+
−
  width: 100%;
+
 
}
 
}
−
 
+
ul {
−
@media only screen and (min-width : 992px) {
+
   list-style-type: none;
−
   .row-eq-height {
+
−
    display: -webkit-box;
+
−
    display: -webkit-flex;
+
−
    display: -ms-flexbox;
+
−
    display: flex;
+
−
  }
+
−
 
+
−
  .feat-left{
+
−
    margin-right: 0.5em;
+
−
  }
+
−
 
+
−
  .feat-center {
+
−
    margin-right: 0.5em;
+
−
    margin-left: 0.5em;
+
−
  }
+
−
 
+
−
  .feat-right {
+
−
    margin-left: 0.5em;
+
−
  }
+
−
 
+
 
}
 
}
−
 
+
body {
−
/* Kuvien ja rivien asettelu loppu */
+
  background-color: #2f2f2f;
−
 
+
}
−
 
+
header {
−
/* Splashit */
+
−
 
+
−
.splash{
+
 
   width: 100%;
 
   width: 100%;
−
   color: white;
+
   position: fixed;
−
   margin-top: -14px;
+
   left: 0px;
−
   text-align: center;
+
   background: #efefef;
−
   background-size: cover;
+
   padding: 10px 10px 10px 50px;
−
   text-shadow: 2px 2px 8px #4D4D4D;
+
  font-size: 30px;
 +
   line-height: 30px;
 +
  z-index: 0;
 
}
 
}
−
 
+
footer {
−
.bigsplashtext {
+
   height: 35vh;
−
   font-size: 1.4em;
+
   color: #fff;
−
   margin: 0 10px;
+
  background-color: #1e1a1b;
 
}
 
}
−
 
+
hr {
−
.splashalavalikko {
+
   border-width: 5px;
−
   text-align: left;
+
   clear: both;
−
   padding: 80px 40px;
+
   display: block;
−
   font-size: 1.5em;
+
   width: 96%;
−
   line-height: 1.5;
+
  background-color: #1e1a1b;
 +
  height: 1px;
 
}
 
}
−
 
+
#home,
−
.splashalavalikko a {
+
#safety,
−
   color: white;
+
#attributions {
−
  opacity: 0.7;
+
   min-height: 80vh;
 
}
 
}
−
 
+
/* drawer menu pane*/
−
.splashalavalikko a:hover {
+
#drawer {
−
   opacity: 1;
+
   position: fixed;
 +
  top: 44px;
 +
  left: -300px;
 +
  height: 100%;
 +
  width: 300px;
 +
  background: #2f2f2f;
 +
  overflow-x: hidden;
 +
  overflow-y: hidden;
 +
  padding: 20px;
 +
  -webkit-overflow-scrolling: touch;
 
}
 
}
−
 
+
#drawer-toggle {
−
.scroller {
+
   position: absolute;
−
   padding-bottom: 40px;
+
   opacity: 0;
−
   padding-top: 10px;
+
 
}
 
}
−
 
+
#drawer-toggle-label {
−
.transp {
+
   -webkit-touch-callout: none;
−
   opacity: 0.7;
+
  -webkit-user-select: none;
 +
  -khtml-user-select: none;
 +
  -moz-user-select: none;
 +
  -ms-user-select: none;
 +
  user-select: none;
 +
  left: 0px;
 +
  height: 50px;
 +
  width: 50px;
 +
  display: block;
 +
  position: fixed;
 +
  background: rgba(255,255,255,0);
 +
  z-index: 1;
 +
/* adds our "hamburger" menu icon */
 
}
 
}
−
 
+
#drawer-toggle-label:before {
−
.transp:hover {
+
   content: '';
−
   opacity: 1;
+
  display: block;
 +
  position: absolute;
 +
  height: 2px;
 +
  width: 24px;
 +
  background: #8d8d8d;
 +
  left: 13px;
 +
  top: 18px;
 +
  box-shadow: 0 6px 0 #8d8d8d, 0 12px 0 #8d8d8d;
 
}
 
}
−
 
+
#page-content {
−
.scrolldown {
+
   margin-left: 0px;
−
   text-align: center;
+
  margin-top: 50px;
 +
  width: 100%;
 +
  height: calc(100% - 50px);
 +
  overflow-x: hidden;
 +
  overflow-y: scroll;
 +
  -webkit-overflow-scrolling: touch;
 +
  background: #efefef;
 
}
 
}
−
 
+
.link {
−
.transp a {
+
   outline: none;
−
   color: white;
+
   display: inline-block;
−
   opacity: 0.7;
+
  position: relative;
 +
  text-decoration: none;
 +
  font-size: 5em;
 +
  color: #424242;
 
}
 
}
−
 
+
.flex {
−
.transp a:hover {
+
   display: flex;
−
   opacity: 1;
+
  flex-direction: column;
 +
  align-items: center;
 +
  justify-content: center;
 
}
 
}
−
 
+
#home #home-hero-bg {
−
.nuoli {
+
  background-image: url("../img/home_hero.jpg");
−
   max-height: 50px;
+
   background-size: cover;
 +
  background-repeat: no-repeat;
 +
  height: 70vh;
 
}
 
}
−
 
+
#home #home-hero-bg .hero {
−
.igem-logo {
+
   width: 100%;
−
   width: 100px;
+
   height: 100%;
−
   margin-top: 60px;
+
   background-color: rgba(50,50,50,0.7);
−
   right: 100px;
+
−
  margin-right: 40px;
+
−
  float: right;
+
−
  opacity: 0.7;
+
 
}
 
}
−
 
+
#home #home-hero-bg .hero div {
−
.igem-logo:hover {
+
  display: flex;
−
   opacity: 1;
+
  flex-direction: column;
 +
   justify-content: center;
 +
  color: #fff;
 +
  height: 100%;
 +
  margin-left: 5%;
 +
  font-weight: 500;
 +
  line-height: 1.2;
 +
  letter-spacing: 3px;
 +
  text-transform: uppercase;
 
}
 
}
−
 
+
#home #desc {
−
.omalogo {
+
   margin-top: 5%;
−
   width: 100%;
+
   text-align: center;
−
   padding-bottom: 1em;
+
  width: 70%;
 
}
 
}
−
 
+
#home #stag_cont {
−
.omalogot {
+
   margin-top: 5%;
−
   width: 60%;
+
   margin-bottom: 5%;
−
   padding-top: 1em;
+
  width: 70%;
 
}
 
}
−
 
+
#home #stag_cont .row {
−
#ci-circle {
+
   height: 40vh;
−
   width: 20%;
+
 
}
 
}
−
 
+
#home #stag_cont .row div {
−
#virginiabadge{
+
   margin-top: 5%;
−
   background: url("https://static.igem.org/mediawiki/2014/6/6a/Virginia_Badge2.png");
+
   height: 100%;
−
  background-size:250px;
+
   text-align: center;
−
  width: 250px;
+
−
   height: 185px;
+
−
   background-repeat:no-repeat;
+
 
}
 
}
−
+
#home #stag_cont .row div img {
−
#virginiabadge:hover{
+
   width: 100%;
−
  background: url("https://static.igem.org/mediawiki/2014/2/2b/File-Virginia-Images-Badge1.png");
+
   height: auto;
−
  background-repeat:no-repeat;
+
−
   width: 250px;
+
−
   height: 185px;
+
−
  background-size:250px;
+
 
}
 
}
−
 
+
#home #showcase {
−
@media only screen and (max-width : 992px) {
+
   width: 100%;
−
 
+
   margin-bottom: 5%;
−
   .splash {
+
−
    min-height: 700px;
+
−
    width: 100%;
+
−
    color: white;
+
−
    text-align: center;
+
−
   }
+
−
 
+
−
  .igem-logo {
+
−
    margin-top: 80px;
+
−
  }
+
−
 
+
−
  .splashcopyright {
+
−
    text-align: right;
+
−
    padding: 60px 40px;
+
−
  }
+
−
 
+
−
  h1 {
+
−
    font-size: 3.5em;
+
−
  }
+
−
 
+
−
  .row-eq-height .img-responsive {
+
−
    width: 100%;
+
−
  }
+
−
 
+
−
  #mainsplash {
+
−
    background-image: url('https://static.igem.org/mediawiki/2014/5/5a/Aalto_Helsinki_Splashs_Main.jpg');
+
−
  }
+
−
 
+
−
  #teamsplash {
+
−
    background-image: url('https://static.igem.org/mediawiki/2014/7/75/Aalto_Helsinki_Splashs_Team.jpg');
+
−
  }
+
−
 
+
−
  #businesssplash {
+
−
    background-image: url('https://static.igem.org/mediawiki/2014/3/3f/Aalto_Helsinki_Splashs_Business.jpg');
+
−
  }
+
−
 
+
−
  #researchsplash {
+
−
    background-image: url('https://static.igem.org/mediawiki/2014/4/4a/Aalto_Helsinki_Splashs_Research.jpg');
+
−
  }
+
−
 
+
−
  #modelingsplash {
+
−
    background-image: url('https://static.igem.org/mediawiki/2014/7/7d/Aalto_Helsinki_Splashs_Modeling.jpg');
+
−
  }
+
−
 
+
−
  #cooperationsplash {
+
−
    background-image: url('https://static.igem.org/mediawiki/2014/9/9e/Aalto_Helsinki_Splashs_Cooperation.jpg');
+
−
  }
+
−
 
+
−
  #outreachsplash {
+
−
    background-image: url('https://static.igem.org/mediawiki/2014/4/45/Aalto_Helsinki_Splashs_Outreach.jpg');
+
−
  }
+
−
 
+
−
  #journalsplash {
+
−
    background-image: url('https://static.igem.org/mediawiki/2014/2/2d/Aalto_Helsinki_Splashs_Journal.jpg');
+
−
  }
+
−
 
+
 
}
 
}
−
 
+
#home #showcase .row {
−
@media only screen and (min-width : 992px) {
+
   display: flex;
−
 
+
   justify-content: center;
−
  .splash {
+
−
    position: relative;
+
−
    min-height: 820px;
+
−
  }
+
−
 
+
−
  .splashesittely {
+
−
    min-height: 400px;
+
−
  }
+
−
 
+
−
  .splashalavalikko {
+
−
    position: absolute;
+
−
    bottom: 0;
+
−
    left: 0;
+
−
  }
+
−
 
+
−
  .splashcopyright {
+
−
    font-size: small;
+
−
    padding: 60px 40px;
+
−
    position: absolute;
+
−
    bottom: 0;
+
−
    right: 0;
+
−
  }
+
−
 
+
−
  #mainsplash {
+
−
    background-image: url('https://static.igem.org/mediawiki/2014/6/60/Aalto_Helsinki_Splash_Main.jpg');
+
−
  }
+
−
 
+
−
  #teamsplash {
+
−
    background-image: url('https://static.igem.org/mediawiki/2014/f/f1/Aalto_Helsinki_Splash_Team.jpg');
+
−
  }
+
−
 
+
−
  #businesssplash {
+
−
    background-image: url('https://static.igem.org/mediawiki/2014/8/80/Aalto_Helsinki_Splash_Business.jpg');
+
−
   }
+
−
 
+
−
  #researchsplash {
+
−
    background-image: url('https://static.igem.org/mediawiki/2014/c/cb/Aalto_Helsinki_Splash_Research.jpg');
+
−
   }
+
−
 
+
−
  #modelingsplash {
+
−
    background-image: url('https://static.igem.org/mediawiki/2014/7/73/Aalto_Helsinki_Splash_Modeling.jpg');
+
−
  }
+
−
 
+
−
  #cooperationsplash {
+
−
    background-image: url('https://static.igem.org/mediawiki/2014/f/f5/Aalto_Helsinki_Splash_Cooperation.jpg');
+
−
  }
+
−
 
+
−
  #outreachsplash {
+
−
    background-image: url('https://static.igem.org/mediawiki/2014/e/e3/Aalto_Helsinki_Splash_Outreach.jpg');
+
−
  }
+
−
 
+
−
  #journalsplash {
+
−
    background-image: url('https://static.igem.org/mediawiki/2014/8/82/Aalto_Helsinki_Splash_Journal.jpg');
+
−
  }
+
−
 
+
 
}
 
}
−
 
+
#home #showcase .row .showcase_item {
−
@media only screen and (min-width : 1472px) {
+
  height: calc(30% + 20px);
−
   .splash {
+
  width: calc(26vw);
−
    min-height: 1030px;
+
   background-color: #ddd /* Place image here then place filter over it */;
−
   }
+
  margin: 20px;
 +
  padding: 60px 0;
 +
  z-index: 1;
 +
   position: relative;
 +
  text-align: center;
 +
  display: inline-block;
 +
  align-items: center;
 +
  justify-content: center;
 +
  -webkit-transform: translate3d(0, 0, 0);
 
}
 
}
−
 
+
#home #showcase .row .showcase_item_long {
−
 
+
  height: calc(40% + 20px);
−
 
+
  width: calc(45vw);
−
/* Splash-tyylittelyt loppu */
+
  background-color: #ddd /* Place image here then place filter over it */;
−
 
+
  margin: 20px;
−
 
+
  padding: 80px 0;
−
/* SIVUJEN OMIA tyylejä */
+
  z-index: 1;
−
 
+
  position: relative;
−
.sponsorrow {
+
  text-align: center;
 +
  display: inline-block;
 
   align-items: center;
 
   align-items: center;
−
   margin: 4em 0;
+
   justify-content: center;
 +
  -webkit-transform: translate3d(0, 0, 0);
 
}
 
}
−
 
+
#home #showcase #sc_team {
−
.sponsorrow .col-md-4 {
+
   background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/home_hero.jpg");
−
   padding: 10px;
+
−
  text-align: -webkit-center;
+
−
  text-align: -moz-center
+
 
}
 
}
−
 
+
#home #showcase #sc_parts {
−
.sponsorrow > .text-col-right > h3 {
+
   background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/home_hero.jpg");
−
   padding-top: 0;
+
 
}
 
}
−
 
+
#home #showcase #sc_results {
−
#sponsorlogo {
+
   background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/home_hero.jpg");
−
   max-height: 150px;
+
−
  width: auto;
+
 
}
 
}
−
 
+
#home #showcase #sc_notebook {
−
/* SIVUJEN OMAT tyylit loppu */
+
   background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/home_hero.jpg");
−
 
+
−
 
+
−
/* Articlejen backgroundit */
+
−
 
+
−
.turqu {
+
−
   background-color: #0AA699;
+
 
}
 
}
−
 
+
#home #showcase #sc_attribution {
−
.turqu a, .green a {
+
   background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/home_hero.jpg");
−
   color: white;
+
 
}
 
}
−
 
+
#team #team_hero_bg {
−
/* Articlejen backgroundit loppu */
+
  background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/attributions_hero.png");
−
 
+
  background-size: cover;
−
 
+
  background-repeat: no-repeat;
−
/* BG (Kuvataustat) */
+
  height: 40vh;
−
 
+
  color: #fff;
−
.bg-test {
+
  text-align: center;
−
   background-image: url('https://static.igem.org/mediawiki/2014/e/ec/Aalto_Helsinki_Placeholderpicture.jpg');
+
   margin-top: 4%;
 +
  margin-bottom: 7%;
 
}
 
}
−
 
+
#team #team_hero_bg div {
−
.bg-bbseeker {
+
   width: 50%;
−
   background-image: url('https://static.igem.org/mediawiki/2014/c/c1/Aalto_Helsinki_Feat_BBSeeker.png');
+
 
}
 
}
−
 
+
#team .baraja-demo {
−
.bg-brian {
+
   width: 200px;
−
   background-image: url('https://static.igem.org/mediawiki/2014/8/8d/Aalto_Helsinki_Feat_Brian.png');
+
  margin: 30px auto;
 +
  color: #aaa;
 +
  height: 50vh;
 
}
 
}
−
 
+
#team .baraja-demo h4 {
−
.bg-magiclab {
+
   color: #666;
−
   background-image: url('https://static.igem.org/mediawiki/2014/2/26/Aalto_Helsinki_Pinkitbakut6.jpg');
+
  font-size: 14px;
 +
  padding: 8px 10px 5px;
 +
  margin: 20px 3px 5px;
 +
  border-bottom: 1px solid #f0f0f0;
 
}
 
}
−
 
+
#team .baraja-demo p {
−
.bg-chimeras {
+
   font-size: 12px;
−
   background-image: url('https://static.igem.org/mediawiki/2014/b/b3/Aalto_Helsinki_Kimeerakollaasi.png');
+
  font-weight: 700;
 +
  padding: 0 10px;
 +
  margin: 10px 3px 0;
 
}
 
}
−
 
+
#team .baraja-demo li img {
−
 
+
   display: block;
−
.bg-team {
+
  margin: 0 auto;
−
   background-image: url('https://static.igem.org/mediawiki/2014/a/a3/Aalto_Helsinki_Feat_Team.jpg');
+
  width: 100%;
 +
  border-radius: 10px 10px 0 0;
 
}
 
}
−
 
+
#team .baraja-demo .baraja-container {
−
.bg-business {
+
   width: 200px;
−
   background-image: url('https://static.igem.org/mediawiki/2014/e/e6/Aalto_Helsinki_Feat_Business.jpg');
+
  height: 310px;
 +
  margin: 0 auto 30px;
 +
  position: relative;
 +
  padding: 0;
 +
  list-style-type: none;
 
}
 
}
−
 
+
#team .baraja-demo .baraja-container li {
−
.bg-research {
+
  width: 100%;
−
   background-image: url('https://static.igem.org/mediawiki/2014/7/7c/Aalto_Helsinki_Feat_Research.jpg');
+
  height: 100%;
 +
  margin: 0;
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  cursor: pointer;
 +
   background: #fff;
 +
  pointer-events: auto;
 +
  -webkit-backface-visibility: hidden;
 +
  -moz-backface-visibility: hidden;
 +
  -ms-backface-visibility: hidden;
 +
  -o-backface-visibility: hidden;
 +
  backface-visibility: hidden;
 +
  border-radius: 10px;
 +
  padding: 5px;
 +
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
 +
  -webkit-user-select: none;
 +
  -khtml-user-select: none;
 +
  -moz-user-select: none;
 +
  -ms-user-select: none;
 +
  user-select: none;
 
}
 
}
−
 
+
#team #thanks {
−
.bg-modeling {
+
   margin-bottom: 5%;
−
   background-image: url('https://static.igem.org/mediawiki/2014/1/17/Aalto_Helsinki_Feat_Modeling.jpg');
+
 
}
 
}
−
 
+
#team #thanks div {
−
.bg-cooperation {
+
   margin-left: 5%;
−
   background-image: url('https://static.igem.org/mediawiki/2014/f/f7/Aalto_Helsinki_Feat_Cooperation.jpg');
+
 
}
 
}
−
 
+
#team #sponsor_list .row {
−
.bg-outreach {
+
   display: flex;
−
   background-image: url('https://static.igem.org/mediawiki/2014/5/5e/Aalto_Helsinki_Feat_Outreach.jpg');
+
  align-items: center;
 +
  justify-content: center;
 
}
 
}
−
 
+
#team img {
−
.bg-journal {
+
   width: 100%;
−
   background-image: url('https://static.igem.org/mediawiki/2014/c/c5/Aalto_Helsinki_Feat_Journal.jpg');
+
  height: auto;
 
}
 
}
−
 
+
#parts #parts_hero_bg {
−
/* BG (Kuvataustat) loppu */
+
  background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/attributions_hero.png");
−
 
+
  background-size: cover;
−
 
+
  background-repeat: no-repeat;
−
/* Footerin tyylit */
+
  height: 40vh;
−
 
+
  color: #fff;
−
footer {
+
 
   text-align: center;
 
   text-align: center;
−
   background: white;
+
   margin-top: 4%;
 +
  margin-bottom: 7%;
 
}
 
}
−
 
+
#parts #parts_hero_bg div {
−
#logorow {
+
   width: 50%;
−
   padding: 2em;
+
 
}
 
}
−
 
+
#parts #parts_content .sub_section {
−
.footerimg {
+
   margin-left: 5%;
−
   max-height: 100px;
+
−
  max-width: 250px;
+
 
}
 
}
−
 
+
#attributions #attr_hero_bg {
−
.footerlogo {
+
  background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/attributions_hero.png");
−
   display: inline-block;
+
   background-size: cover;
−
   vertical-align: middle;
+
  background-repeat: no-repeat;
−
   padding: 1.5em;
+
   height: 40vh;
 +
  color: #fff;
 +
  text-align: center;
 +
   margin-top: 4%;
 +
  margin-bottom: 7%;
 
}
 
}
−
 
+
#attributions #attr_hero_bg div {
−
.footerlogo:hover .on, .footerlogo .off {
+
   width: 50%;
−
   display:none;
+
 
}
 
}
−
 
+
#attributions #attr_content {
−
.footerlogo:hover .off {
+
   margin-bottom: 5%;
−
   display:block;
+
 
}
 
}
−
 
+
#attributions #attr_content .sub_section {
−
#yhteystiedot {
+
   margin-left: 5%;
−
   text-align: center;
+
−
  font-size: small;
+
−
  padding: 0.5em;
+
 
}
 
}
 +
/*
 +
.bump_up
 +
margin-top 6%
 +
.bump_down
 +
margin-bottom 5%
  
−
/* Footerin tyylit loppu */
+
.text-center
 +
text-align center
 +
 +
// Testing Grounds for fonts
 +
.font-raleway
 +
font-family Raleway
 +
.font-aref
 +
font-family Aref Ruqaa
 +
.font-harmattan
 +
font-family Harmattan
 +
.font-reem
 +
font-family Reem Kufi
  
  
−
/* Padit ja puhelimet */
+
.black
 +
background-color black
  
−
@media only screen and (max-width : 992px) {
+
.blue
 +
background-color blue
 +
 +
.container
 +
../ .section-div
 +
height 40vh
 +
../ img
 +
width 100%
 +
height auto
 +
../ .link_box
 +
height 30vh
 +
background-color pink
 +
margin auto
 +
margin-left 5%
 +
../ img
 +
border-radius 25px
 +
../ .section-div
 +
text-align center
 +
div
 +
display inline-block
 +
#lbox_1
 +
margin-left 6.5%
  
−
 
+
#safety
−
  /* Yleiset */
+
#theme1
−
 
+
background-image url('../img/human_practices_1.jpg')
−
  .bodyContent {
+
#theme2
−
    padding-top: 5em;
+
background-image url('../img/human_practices_2.jpg')
−
  }
+
#theme3
−
 
+
background-image url('../img/human_practices_3.jpg')
−
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
+
.safety-div
−
  .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
+
display flex
−
    margin-top: 1em;
+
flex-direction column
−
    padding: 0;
+
justify-content center
−
  }
+
color white
−
 
+
−
  article {
+
#human_practices
−
    padding: 5em 1em;
+
#theme1
−
    min-height: 50px;
+
background-image url('../img/human_practices_1.jpg')
−
    font-size: 16px;
+
#theme2
−
  }
+
background-image url('../img/human_practices_2.jpg')
−
 
+
#theme3
−
  .row {
+
background-image url('../img/human_practices_3.jpg')
−
    margin: 0;
+
.hp_div
−
  }
+
display flex
−
 
+
flex-direction column
−
 
+
justify-content center
−
  /* Headerit sun muut */
+
color white
−
  #navigation {
+
*/
−
    padding: 0;
+
.bckgnd_image {
−
  }
+
   position: static;
−
 
+
   min-height: 945px;
−
  #menubar {
+
   height: 100%;
−
    font-family: inherit;
+
   background-image: url("../img/safety_visions.jpg");
−
    white-space: normal;
+
   background-attachment: fixed;
−
    width: 300px;
+
   background-position: center center;
−
    z-index: 1;
+
  background-size: cover;
−
  }
+
−
 
+
−
  .left-menu {
+
−
    margin-top: 60px;
+
−
    left: 0;
+
−
    text-align: left;
+
−
  }
+
−
 
+
−
  .left-menu ul {
+
−
    margin-right: 0.2em;
+
−
  }
+
−
 
+
−
  .left-menu li a {
+
−
    padding: 0px 2px 0px 2px
+
−
  }
+
−
 
+
−
  .right-menu {
+
−
    margin-top: 60px;
+
−
    right: 0;
+
−
    text-align: right;
+
−
  }
+
−
 
+
−
 
+
−
  .right-menu ul {
+
−
    margin-right: 0.2em;
+
−
  }
+
−
 
+
−
  .right-menu li a {
+
−
    padding: 0 2px 0 2px;
+
−
  }
+
−
 
+
−
  li#pt-userpage, li#pt-anonuserpage, li#pt-login {
+
−
    padding-left: 0;
+
−
  }
+
−
 
+
−
  header .navbar {
+
−
    font-size: 16px;
+
−
    border-radius: 0px;
+
−
    padding: 0.5em 0;
+
−
  }
+
−
 
+
−
  header a {
+
−
    padding-right: 0.2em;
+
−
    padding-left: 0.2em;
+
−
  }
+
−
 
+
−
  .affix-top, .affix, .extrabar a, .extrabar {
+
−
    display: none;
+
−
  }
+
−
 
+
−
  #logorow {
+
−
    padding: none;
+
−
  }
+
−
 
+
−
  .footerlogo {
+
−
    padding: 1.5em 0em
+
−
  }
+
−
 
+
−
 
+
−
  /* Muut */
+
−
  .mobile-hide {
+
−
    display: none;
+
−
  }
+
−
 
+
−
}
+
−
 
+
−
/* Padit ja puhelimet loppu */
+
−
 
+
−
/* Taustat */
+
−
 
+
−
.abg-pcb {
+
−
   background-image: url('https://static.igem.org/mediawiki/2014/b/ba/Aalto_Helsinki_PCB.png');
+
−
   background-repeat: no-repeat;
+
−
   background-position: right center;
+
−
}
+
−
 
+
−
.abg-dnaseq {
+
−
   background-image: url('https://static.igem.org/mediawiki/2014/f/fc/Aalto_Helsinki_dnaseq.png');
+
−
   background-repeat: no-repeat;
+
−
   background-position: left center;
+
 
}
 
}

Revision as of 23:24, 17 October 2016

@font-face { 

 font-family: Aref Ruqaa;
 font-weight: 300;
 font-style: normal;

} @font-face { 

 font-family: Harmattan;
 font-weight: 400;
 font-style: normal;

} @font-face { 

 font-family: Raleway;
 font-weight: 400;
 font-style: normal;

} @font-face { 

 font-family: Reem Kufi;
 font-weight: 400;
 font-style: normal;

} html, body, div, p { 

 font-family: Harmattan;
 font-size: 14px;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;

} a { 

 outline: none;
 color: #9e9ba4;
 text-decoration: none;

} a:hover { 

 color: #f9f9f9;
 text-decoration: none;

} a:focus { 

 outline: none;
 text-decoration: none;

} h1 { 

 font-family: Reem Kufi;

} h2 { 

 font-size: 3em;

} article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { 

 display: block;

} audio, canvas, video { 

 display: inline-block;

} audio:not([controls]) { 

 display: none;
 height: 0;

} [hidden] { 

 display: none;

} html { 

 font-family: sans-serif;
 -webkit-text-size-adjust: 100%;
 -ms-text-size-adjust: 100%;

} a:focus { 

 outline: thin dotted;

} a:active, a:hover { 

 outline: 0;

} h1 { 

 font-size: 2em;

} abbr[title] { 

 border-bottom: 1px dotted;

} b, strong { 

 font-weight: 700;

} dfn { 

 font-style: italic;

} mark { 

 background: #ff0;
 color: #000;

} code, kbd, pre, samp { 

 font-family: monospace, serif;
 font-size: 1em;

} pre { 

 white-space: pre-wrap;
 word-wrap: break-word;

} q { 

 quotes: 2 1C 2 1D 2 18 2 19;

} small { 

 font-size: 80%;

} sub, sup { 

 font-size: 75%;
 line-height: 0;
 position: relative;
 vertical-align: baseline;

} sup { 

 top: -0.5em;

} sub { 

 bottom: -0.25em;

} img { 

 border: 0;

} svg:not(:root) { 

 overflow: hidden;

} fieldset { 

 border: 1px solid #c0c0c0;
 margin: 0 2px;
 padding: 0.35em 0.625em 0.75em;

} button, input, select, textarea { 

 font-family: inherit;
 font-size: 100%;
 margin: 0;

} button, input { 

 line-height: normal;

} button, html input[type=button], input[type=reset], input[type=submit] { 

 -webkit-appearance: button;
 cursor: pointer;

} button[disabled], input[disabled] { 

 cursor: default;

} input[type=checkbox], input[type=radio] { 

 box-sizing: border-box;
 padding: 0;

} input[type=search] { 

 -webkit-appearance: textfield;
 -moz-box-sizing: content-box;
 -webkit-box-sizing: content-box;
 box-sizing: content-box;

} input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { 

 -webkit-appearance: none;

} textarea { 

 overflow: auto;
 vertical-align: top;

} table { 

 border-collapse: collapse;
 border-spacing: 0;

} body, figure { 

 margin: 0;

} legend, button::-moz-focus-inner, input::-moz-focus-inner { 

 border: 0;
 padding: 0;

} .clearfix:after { 

 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;

}

  • {
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;

}

  • {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -o-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: 0.25s ease-in-out;
 -moz-transition: 0.25s ease-in-out;
 -o-transition: 0.25s ease-in-out;
 transition: 0.25s ease-in-out;
 margin: 0;
 padding: 0;

}

  1. drawer-toggle:checked ~ #drawer-toggle-label {
 height: 100 $;
 width: calc(100% - 300px);
 background: rgba(255,255,255,0.8);
 left: 300px;

}

  1. drawer-toggle:checked ~ header {
 left: 300px;

}

  1. drawer-toggle:checked ~ #drawer {
 left: 0px;

}

  1. drawer-toggle:checked ~ #page-content {
 margin-left: 300px;

}

  1. drawer ul {
 list-style-type: none;

}

  1. drawer ul a {
 display: block;
 padding: 10px;
 color: #c7c7c7;
 text-decoration: none;

}

  1. drawer ul a:hover {
 color: #fff;

} @media all and (max-width: 350px) { 

 #drawer-toggle:checked ~ #drawer-toggle-label {
   height: 100%;
   width: 50px;
 }
 #drawer-toggle:checked ~ #drawer-toggle-label,
 #drawer-toggle:checked ~header {
   left: calc(100% - 50px);
 }
 #drawer-toggle:checked ~ drawer {
   width: calc(100% - 50px);
   padding: 20px;
 }
 #drawer-toggle:checked ~ #page-content {
   margin-left: calc(100% - 50px);
 }

} .kukuri { 

 text-transform: uppercase;
 overflow: hidden;
 display: inline-block;

} .kukuri::before { 

 content: attr(data-letters);
 position: absolute;
 z-index: 2;
 overflow: hidden;
 color: #424242;
 white-space: nowrap;
 width: 0%;
 -webkit-transition: width 0.4s 0.3s;
 transition: width 0.4s 0.3s;

} .kukuri::after { 

 content: ;
 position: absolute;
 height: 16px;
 width: 100%;
 top: 50%;
 margin-top: -8px;
 right: 0;
 background: #f9f9f9;
 -webkit-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 0, 0);
 -webkit-transition: -webkit-transform 0.4s;
 transition: transform 0.4s;
 -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
 transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);

} .kukuri:hover::before { 

 width: 100%;

} .kukuri:hover::after { 

 -webkit-transform: translate3d(100%, 0, 0);
 transform: translate3d(100%, 0, 0);

} html, body { 

 height: 100%;
 overflow: hidden;

} ul { 

 list-style-type: none;

} body { 

 background-color: #2f2f2f;

} header { 

 width: 100%;
 position: fixed;
 left: 0px;
 background: #efefef;
 padding: 10px 10px 10px 50px;
 font-size: 30px;
 line-height: 30px;
 z-index: 0;

} footer { 

 height: 35vh;
 color: #fff;
 background-color: #1e1a1b;

} hr { 

 border-width: 5px;
 clear: both;
 display: block;
 width: 96%;
 background-color: #1e1a1b;
 height: 1px;

}

  1. home,
  2. safety,
  3. attributions {
 min-height: 80vh;

} /* drawer menu pane*/

  1. drawer {
 position: fixed;
 top: 44px;
 left: -300px;
 height: 100%;
 width: 300px;
 background: #2f2f2f;
 overflow-x: hidden;
 overflow-y: hidden;
 padding: 20px;
 -webkit-overflow-scrolling: touch;

}

  1. drawer-toggle {
 position: absolute;
 opacity: 0;

}

  1. drawer-toggle-label {
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 left: 0px;
 height: 50px;
 width: 50px;
 display: block;
 position: fixed;
 background: rgba(255,255,255,0);
 z-index: 1;

/* adds our "hamburger" menu icon */ }

  1. drawer-toggle-label:before {
 content: ;
 display: block;
 position: absolute;
 height: 2px;
 width: 24px;
 background: #8d8d8d;
 left: 13px;
 top: 18px;
 box-shadow: 0 6px 0 #8d8d8d, 0 12px 0 #8d8d8d;

}

  1. page-content {
 margin-left: 0px;
 margin-top: 50px;
 width: 100%;
 height: calc(100% - 50px);
 overflow-x: hidden;
 overflow-y: scroll;
 -webkit-overflow-scrolling: touch;
 background: #efefef;

} .link { 

 outline: none;
 display: inline-block;
 position: relative;
 text-decoration: none;
 font-size: 5em;
 color: #424242;

} .flex { 

 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;

}

  1. home #home-hero-bg {
 background-image: url("../img/home_hero.jpg");
 background-size: cover;
 background-repeat: no-repeat;
 height: 70vh;

}

  1. home #home-hero-bg .hero {
 width: 100%;
 height: 100%;
 background-color: rgba(50,50,50,0.7);

}

  1. home #home-hero-bg .hero div {
 display: flex;
 flex-direction: column;
 justify-content: center;
 color: #fff;
 height: 100%;
 margin-left: 5%;
 font-weight: 500;
 line-height: 1.2;
 letter-spacing: 3px;
 text-transform: uppercase;

}

  1. home #desc {
 margin-top: 5%;
 text-align: center;
 width: 70%;

}

  1. home #stag_cont {
 margin-top: 5%;
 margin-bottom: 5%;
 width: 70%;

}

  1. home #stag_cont .row {
 height: 40vh;

}

  1. home #stag_cont .row div {
 margin-top: 5%;
 height: 100%;
 text-align: center;

}

  1. home #stag_cont .row div img {
 width: 100%;
 height: auto;

}

  1. home #showcase {
 width: 100%;
 margin-bottom: 5%;

}

  1. home #showcase .row {
 display: flex;
 justify-content: center;

}

  1. home #showcase .row .showcase_item {
 height: calc(30% + 20px);
 width: calc(26vw);
 background-color: #ddd /* Place image here then place filter over it */;
 margin: 20px;
 padding: 60px 0;
 z-index: 1;
 position: relative;
 text-align: center;
 display: inline-block;
 align-items: center;
 justify-content: center;
 -webkit-transform: translate3d(0, 0, 0);

}

  1. home #showcase .row .showcase_item_long {
 height: calc(40% + 20px);
 width: calc(45vw);
 background-color: #ddd /* Place image here then place filter over it */;
 margin: 20px;
 padding: 80px 0;
 z-index: 1;
 position: relative;
 text-align: center;
 display: inline-block;
 align-items: center;
 justify-content: center;
 -webkit-transform: translate3d(0, 0, 0);

}

  1. home #showcase #sc_team {
 background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/home_hero.jpg");

}

  1. home #showcase #sc_parts {
 background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/home_hero.jpg");

}

  1. home #showcase #sc_results {
 background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/home_hero.jpg");

}

  1. home #showcase #sc_notebook {
 background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/home_hero.jpg");

}

  1. home #showcase #sc_attribution {
 background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/home_hero.jpg");

}

  1. team #team_hero_bg {
 background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/attributions_hero.png");
 background-size: cover;
 background-repeat: no-repeat;
 height: 40vh;
 color: #fff;
 text-align: center;
 margin-top: 4%;
 margin-bottom: 7%;

}

  1. team #team_hero_bg div {
 width: 50%;

}

  1. team .baraja-demo {
 width: 200px;
 margin: 30px auto;
 color: #aaa;
 height: 50vh;

}

  1. team .baraja-demo h4 {
 color: #666;
 font-size: 14px;
 padding: 8px 10px 5px;
 margin: 20px 3px 5px;
 border-bottom: 1px solid #f0f0f0;

}

  1. team .baraja-demo p {
 font-size: 12px;
 font-weight: 700;
 padding: 0 10px;
 margin: 10px 3px 0;

}

  1. team .baraja-demo li img {
 display: block;
 margin: 0 auto;
 width: 100%;
 border-radius: 10px 10px 0 0;

}

  1. team .baraja-demo .baraja-container {
 width: 200px;
 height: 310px;
 margin: 0 auto 30px;
 position: relative;
 padding: 0;
 list-style-type: none;

}

  1. team .baraja-demo .baraja-container li {
 width: 100%;
 height: 100%;
 margin: 0;
 position: absolute;
 top: 0;
 left: 0;
 cursor: pointer;
 background: #fff;
 pointer-events: auto;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -ms-backface-visibility: hidden;
 -o-backface-visibility: hidden;
 backface-visibility: hidden;
 border-radius: 10px;
 padding: 5px;
 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;

}

  1. team #thanks {
 margin-bottom: 5%;

}

  1. team #thanks div {
 margin-left: 5%;

}

  1. team #sponsor_list .row {
 display: flex;
 align-items: center;
 justify-content: center;

}

  1. team img {
 width: 100%;
 height: auto;

}

  1. parts #parts_hero_bg {
 background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/attributions_hero.png");
 background-size: cover;
 background-repeat: no-repeat;
 height: 40vh;
 color: #fff;
 text-align: center;
 margin-top: 4%;
 margin-bottom: 7%;

}

  1. parts #parts_hero_bg div {
 width: 50%;

}

  1. parts #parts_content .sub_section {
 margin-left: 5%;

}

  1. attributions #attr_hero_bg {
 background: linear-gradient(rgba(50,50,50,0.7), rgba(50,50,50,0.7)), url("../img/attributions_hero.png");
 background-size: cover;
 background-repeat: no-repeat;
 height: 40vh;
 color: #fff;
 text-align: center;
 margin-top: 4%;
 margin-bottom: 7%;

}

  1. attributions #attr_hero_bg div {
 width: 50%;

}

  1. attributions #attr_content {
 margin-bottom: 5%;

}

  1. attributions #attr_content .sub_section {
 margin-left: 5%;

} /* .bump_up margin-top 6% .bump_down margin-bottom 5%

.text-center text-align center

// Testing Grounds for fonts .font-raleway font-family Raleway .font-aref font-family Aref Ruqaa .font-harmattan font-family Harmattan .font-reem font-family Reem Kufi


.black background-color black

.blue background-color blue

.container ../ .section-div height 40vh ../ img width 100% height auto ../ .link_box height 30vh background-color pink margin auto margin-left 5% ../ img border-radius 25px ../ .section-div text-align center div display inline-block #lbox_1 margin-left 6.5%

  1. safety

#theme1 background-image url('../img/human_practices_1.jpg') #theme2 background-image url('../img/human_practices_2.jpg') #theme3 background-image url('../img/human_practices_3.jpg') .safety-div display flex flex-direction column justify-content center color white

  1. human_practices

#theme1 background-image url('../img/human_practices_1.jpg') #theme2 background-image url('../img/human_practices_2.jpg') #theme3 background-image url('../img/human_practices_3.jpg') .hp_div display flex flex-direction column justify-content center color white */ .bckgnd_image { 

 position: static;
 min-height: 945px;
 height: 100%;
 background-image: url("../img/safety_visions.jpg");
 background-attachment: fixed;
 background-position: center center;
 background-size: cover;

}