Difference between revisions of "Template:UCL/CSS style"

(Main css file)
 
Line 1: Line 1:
−
<html>
+
@import url('https://static.igem.org/mediawiki/2018/5/52/T--UCL--QuicksandReg.eot');
−
<style>
+
@import url('https://fonts.googleapis.com/css?family=Quicksand');
  
−
body
+
@import url("https://static.igem.org/mediawiki/2018/6/6a/T--UCL--futuramed.eot");
−
{
+
 
 +
/*Futura*/
 +
@font-face {
 +
  font-family: "Futura";
 +
  font-style: normal;
 +
  font-weight: 400;
 +
    src: url("https://static.igem.org/mediawiki/2018/6/6a/T--UCL--futuramed.eot");
 +
    src: local('Futura'), local('Futura'),
 +
    url("https://static.igem.org/mediawiki/2018/6/6a/T--UCL--futuramed.eot") format("embedded-opentype"),
 +
    url("https://static.igem.org/mediawiki/2018/c/ce/T--UCL--futuramed.woff") format("woff"),
 +
    url("https://static.igem.org/mediawiki/2018/e/e6/T--UCL--futuramed.ttf") format("truetype"),
 +
  }
 +
 
 +
/* Quicksand regular */
 +
@font-face {
 +
    font-family: 'Quicksand';
 +
    font-style: normal;
 +
    font-weight: 400;
 +
    src: url('https://static.igem.org/mediawiki/2018/5/52/T--UCL--QuicksandReg.eot');
 +
    src: local('Quicksand Regular'), local('Quicksand-Regular'),
 +
            url('https://static.igem.org/mediawiki/2018/5/52/T--UCL--QuicksandReg.eot') format('embedded-opentype'),
 +
            url('https://static.igem.org/mediawiki/2018/a/aa/T--UCL--quicksand.ttf') format('truetype'),
 +
            url('https://static.igem.org/mediawiki/2018/7/74/T--UCL--QuicksandReg1.woff') format('woff');
 +
}
 +
 
 +
#sideMenu,
 +
#top_title {
 +
    display: none;
 +
}
 +
 
 +
#content {
 +
    width: 100vw;
 +
    padding: 0px;
 +
    border: none;
 +
    color: black;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
    background-color: #fff;
 +
    position: relative;
 +
}
 +
 
 +
#top_menu_under {
 +
    height: 0px !important;
 +
}
 +
/* ====NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR==== */
 +
* {
 
   margin:0;
 
   margin:0;
 
   padding:0;
 
   padding:0;
 +
}
  
 +
@media screen and (min-width: 1024px) {
 +
    nav, nav ul li a {
 +
        height: 8.5vh;
 +
    }
 
}
 
}
 +
 +
@media screen and (max-width: 1023px) {
 +
    nav, nav ul li a {
 +
        height: 5vh;
 +
    }
 +
}
 +
 
nav
 
nav
 
{
 
{
−
   font-family: Quicksand;
+
   font-family: "Quicksand";
 
   font-weight:100;
 
   font-weight:100;
 
   position: fixed;
 
   position: fixed;
Line 16: Line 73:
 
   left:0;
 
   left:0;
 
   width:100%;
 
   width:100%;
−
  height:74px;
 
 
   box-sizing: border-box;
 
   box-sizing: border-box;
 
   transition: 0.3s;
 
   transition: 0.3s;
Line 23: Line 79:
 
   z-index:3;
 
   z-index:3;
 
}
 
}
 +
 
nav.black
 
nav.black
 
{
 
{
 
   background: rgba(0,0,0,0.75);
 
   background: rgba(0,0,0,0.75);
−
  position: fixed;
 
−
  top:0;
 
−
  left:0;
 
−
  width:100%;
 
−
  height:74px;
 
−
  box-sizing: border-box;
 
−
  transition: 0.3s;
 
 
}
 
}
−
nav .img-logo
+
.div-logo
 
{
 
{
−
  height:100px;
+
    position: relative;
−
  width:100px;
+
    top: 3vh;
−
  float:left;
+
    left:1.5vw;
−
  transition:0.3s;
+
    z-index: 9999;
−
  position: fixed;
+
−
  top: 25px;
+
−
  left:100px;
+
 
}
 
}
−
nav.black.img-logo
+
.img-logo
 
{
 
{
−
  height:100px;
+
   width:5.952380952vw;
−
   width:100px;
+
 
   float:left;
 
   float:left;
 
   transition:0.3s;
 
   transition:0.3s;
 +
  box-shadow: 5px 5px 10px #d0513a;
 +
  border-radius: 100%;
 +
  z-index: 9999;
 +
  -webkit-transform: translateX(3vh);
 +
transform: translateX(3vh);
 +
position:fixed;
 +
}
 +
.black.img-logo
 +
{
 +
 
}
 
}
 
nav ul
 
nav ul
Line 66: Line 122:
 
nav ul li a
 
nav ul li a
 
{
 
{
−
   color:rgba(242, 77, 25,1);
+
   color: rgba(242, 77, 25,1);
 
   text-decoration: none;
 
   text-decoration: none;
 
   text-transform: uppercase;
 
   text-transform: uppercase;
 
   transition:0.3s;
 
   transition:0.3s;
−
  padding: 27.5px 0px;
 
 
   box-sizing: border-box;
 
   box-sizing: border-box;
 
   position: relative;
 
   position: relative;
−
   font-size: 15px;
+
   font-size: 0.9vw;
 
   display: block;
 
   display: block;
 
   text-align: center;
 
   text-align: center;
−
   width: 175px;
+
   width: 12vw;
 +
  vertical-align: middle;
 +
  display: table-cell;
 
}
 
}
 
nav.black ul li a
 
nav.black ul li a
 
{
 
{
−
   color:rgba(255, 255, 255, 1);
+
   color: rgba(255, 255, 255, 1);
−
  text-decoration: none;
+
 
−
  text-transform: uppercase;
+
−
  transition:0.3s;
+
−
  padding: 27.5px 0px;
+
−
  box-sizing: border-box;
+
−
  position: relative;
+
−
  font-size: 15px;
+
−
  display: block;
+
−
  text-align: center;
+
 
}
 
}
 
nav ul li a:before
 
nav ul li a:before
Line 108: Line 157:
 
nav ul li a:hover
 
nav ul li a:hover
 
{
 
{
−
   color:rgba(255, 255, 255, 1)
+
   color:rgba(255, 255, 255, 1);
 +
  text-decoration: none;
 
}
 
}
 
nav ul li a:hover:before
 
nav ul li a:hover:before
Line 117: Line 167:
 
nav.black ul li a:before
 
nav.black ul li a:before
 
{
 
{
−
  content: '';
+
 
−
  position: absolute;
+
−
  top: 0;
+
−
  left:0;
+
−
  width:100%;
+
−
  height:100%;
+
 
   background:rgba(255,255,255,0.75);
 
   background:rgba(255,255,255,0.75);
−
  transform-origin:top;
+
 
−
  transform:scaleY(0);
+
−
  transition: 0.5s;
+
−
  color:#000;
+
−
  z-index: -1;
+
 
}
 
}
 
nav.black ul li a:hover
 
nav.black ul li a:hover
 
{
 
{
−
   color:rgba(0,0,0,1)
+
   color:rgba(0,0,0,1);
 +
  text-decoration: none;
 
}
 
}
 
nav.black ul li a:hover:before
 
nav.black ul li a:hover:before
Line 157: Line 199:
 
nav.black ul li ul
 
nav.black ul li ul
 
{
 
{
−
  display:none;
+
 
−
  text-align: center;
+
−
  max-width: 200px;
+
−
  transition:0.3s;
+
−
  opacity: 0;
+
−
  visibility: hidden;
+
−
  transform:translateY(0px);
+
 
   background:rgba(0,0,0,0.75);
 
   background:rgba(0,0,0,0.75);
 
}
 
}
Line 174: Line 210:
 
nav ul li ul li a
 
nav ul li ul li a
 
{
 
{
−
   padding:15px 30px;
+
   text-align: center;
 +
  position: relative;
 +
  vertical-align: middle;
 +
  display: table-cell;
 
}
 
}
 
nav.black ul li ul li a
 
nav.black ul li ul li a
 
{
 
{
−
  padding:15px 30px;
+
 
 
}
 
}
 +
 +
@media screen and (max-width:700px) {
 +
    .particle-bg-intro, .scroll, .section1, .section2, .section3,
 +
    .section4, .section5 {
 +
        width: 100%;
 +
    }
 +
}
 +
 +
@media screen and (max-width:700px) {.particle-bg-heading, .acronym, .acronym1, .acronym2,
 +
.acronym3, .acronym4, .heading, .heading1, .heading2, .heading3,
 +
.heading4, {
 +
    width: 100%;
 +
    }
 +
}
 +
 +
/* ====HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING==== */
  
 
section.sec1
 
section.sec1
Line 185: Line 240:
 
   width: 100%;
 
   width: 100%;
 
   height: 100vh;
 
   height: 100vh;
−
   background: url('resources/Images/8.jpg');
+
   background: url('https://static.igem.org/mediawiki/2018/7/7d/T--UCL--SilkStock1.jpg');
 
   background-size: cover;
 
   background-size: cover;
 
   background-repeat: no-repeat;
 
   background-repeat: no-repeat;
 
   background-position: center;
 
   background-position: center;
 +
  background-color: #000000;
 +
  -webkit-filter: blur(3px);
 +
  -moz-filter: blur(3px);
 +
  -o-filter: blur(3px);
 +
  -ms-filter: blur(3px);
 +
  filter: blur(3px);
 +
  position: relative;
 +
  min-height: 1px;
 +
  -ms-flex: 0 0 100%;
 +
  flex: 0 0 100%;
 +
  max-width: 100%;
 +
  padding: 5em 1em;
 +
  border-radius: 0.3em;
 
}
 
}
−
.particle-bg-heading
+
div.particle-bg-heading
 
{
 
{
−
   position:absolute;
+
   position: absolute;
 
   top:15vh;
 
   top:15vh;
−
   left:15vw;
+
   left:10vw;
 +
  right:10vw;
 +
}
 +
 
 +
@media screen and (min-width: 1024px) {
 +
    .acronym {
 +
        font-size: 8vw;
 +
    }
 +
}
 +
@media screen and (max-width: 1023px) {
 +
    .acronym{
 +
        font-size: 9vw;
 +
    }
 +
}
 +
@media screen and (min-width: 1024px) {
 +
    .heading {
 +
        font-size: 5vw;
 +
    }
 +
}
 +
@media screen and (max-width: 1023px) {
 +
    .heading{
 +
        font-size: 6vw;
 +
    }
 
}
 
}
 
.particle-bg-heading .acronym
 
.particle-bg-heading .acronym
 
{
 
{
 
   color: rgba(242, 77, 25,1);
 
   color: rgba(242, 77, 25,1);
−
   font-family: Quicksand;
+
   font-family: "Quicksand",serif;
−
   font-weight: bolder;
+
   animation-delay: 0s;
−
   font-size: 96px;
+
   font-weight: 600;
−
   line-height: 1;
+
   display:inline-block;
 
}
 
}
 
.particle-bg-heading .acronym1
 
.particle-bg-heading .acronym1
 
{
 
{
−
  animation-name: fadeIn;
 
−
  animation-duration: 3s;
 
−
  animation-iteration-count: 1;
 
−
  display:inline-block;
 
−
  animation-delay: 0.5s;
 
  
 +
  animation-duration: 1s;
 +
  animation-iteration-count: 1;
 +
  line-height: 1em;
 
}
 
}
  
 
.particle-bg-heading .acronym2
 
.particle-bg-heading .acronym2
 
{
 
{
−
  animation-name: fadeIn;
+
 
−
   animation-duration: 3s;
+
   animation-duration: 1s;
 
   animation-iteration-count: 1;
 
   animation-iteration-count: 1;
−
   display:inline-block;
+
   line-height: 1em;
−
  animation-delay: 0.5s;
+
  
 
}
 
}
 
.particle-bg-heading .acronym3
 
.particle-bg-heading .acronym3
 
{
 
{
−
  animation-name: fadeIn;
 
−
  animation-duration: 3s;
 
−
  animation-iteration-count: 1;
 
−
  display:inline-block;
 
−
  animation-delay: 0.5s;
 
  
 +
  animation-duration: 1s;
 +
  animation-iteration-count: 1;
 +
  line-height: 1em;
 
}
 
}
 
.particle-bg-heading .acronym4
 
.particle-bg-heading .acronym4
 
{
 
{
−
  animation-name: fadeIn;
+
 
−
   animation-duration: 3s;
+
   animation-duration: 1s;
 
   animation-iteration-count: 1;
 
   animation-iteration-count: 1;
−
   display:inline-block;
+
   line-height: 1em;
−
  animation-delay: 0.5s;
+
−
 
+
 
}
 
}
 
.particle-bg-heading .heading
 
.particle-bg-heading .heading
 
{
 
{
 
   color:#ffffff;
 
   color:#ffffff;
−
   font-family: 'Quicksand',serif;
+
   font-family: "Futura",serif;
−
   font-weight: 800;
+
   font-weight: 100;
−
  font-size: 72px;
+
−
  line-height: 1;
+
 
}
 
}
 
.particle-bg-heading .heading1
 
.particle-bg-heading .heading1
 
{
 
{
−
  animation-name: flipInX;
+
 
−
   animation-delay: 3s;
+
   animation-delay: 1.5s;
 
   animation-duration: 1.5s;
 
   animation-duration: 1.5s;
 
   animation-iteration-count: 1;
 
   animation-iteration-count: 1;
−
   display:inline-block;
+
   line-height: 1em;
−
 
+
display:inline-block;
 
}
 
}
 
.particle-bg-heading .heading2
 
.particle-bg-heading .heading2
 
{
 
{
−
  animation-name: flipInX;
+
 
 
   animation-duration: 1.5s;
 
   animation-duration: 1.5s;
 
   animation-iteration-count: 1;
 
   animation-iteration-count: 1;
 +
  animation-delay: 2s;
 +
  line-height: 1em;
 
   display:inline-block;
 
   display:inline-block;
−
  animation-delay: 3.5s;
 
 
}
 
}
 
.particle-bg-heading .heading3
 
.particle-bg-heading .heading3
 
{
 
{
−
  animation-name: flipInX;
+
 
 
   animation-duration: 1.5s;
 
   animation-duration: 1.5s;
 
   animation-iteration-count: 1;
 
   animation-iteration-count: 1;
−
   display:inline-block;
+
   animation-delay: 2.5s;
−
   animation-delay: 4s;
+
   line-height: 1em;
−
 
+
display:inline-block;
 
}
 
}
 
.particle-bg-heading .heading4
 
.particle-bg-heading .heading4
 
{
 
{
−
  animation-name: flipInX;
+
 
 
   animation-duration: 1.5s;
 
   animation-duration: 1.5s;
 
   animation-iteration-count: 1;
 
   animation-iteration-count: 1;
 +
  animation-delay: 3s;
 +
  line-height: 1em;
 
   display:inline-block;
 
   display:inline-block;
−
  animation-delay: 4.5s;
 
 
}
 
}
  
 
.particle-bg-intro
 
.particle-bg-intro
 
{
 
{
−
   font-family: Quicksand;
+
   font-family: "Quicksand";
 
   font-weight: 100;
 
   font-weight: 100;
−
  font-size: 18px;
+
   position: relative;
−
   position:absolute;
+
−
  top:60vh;
+
−
  left:15vw;
+
 
   line-height: 1.75;
 
   line-height: 1.75;
−
   color:white;
+
   color: #ffffff;
 +
  animation-timing-function: ease-in;
 +
  animation-delay: 4s;
 +
  text-align: justify;
 
}
 
}
  
Line 299: Line 382:
 
{
 
{
 
   font-size: 96px;
 
   font-size: 96px;
−
  text-align: center;
 
−
 
 
   color:#ffffff;
 
   color:#ffffff;
−
  animation-name: fadeIn;
 
 
   animation-iteration-count: infinite;
 
   animation-iteration-count: infinite;
−
   animation-duration: 1.5s;
+
   animation-duration: 5s;
−
   animation-delay: 2s;
+
   animation-delay: 0s;
−
   top: 92.5vh;
+
   animation-direction: alternate;
−
  left:47.5vw;
+
 
   position: absolute;
 
   position: absolute;
−
text-decoration: none;
+
  text-align: center;
 +
  text-decoration: none;
 +
 
 
}
 
}
  
 +
a.nostyle:link {
 +
    text-decoration: inherit;
 +
    color: inherit;
 +
    cursor: auto;
 +
}
  
 +
a.nostyle:visited {
 +
    text-decoration: inherit;
 +
    color: inherit;
 +
    cursor: auto;
 +
}
 
section.section1
 
section.section1
 
{
 
{
−
   margin-top: 80px;
+
   padding: 100px 0px 100px;
 
}
 
}
 
section.section1 p
 
section.section1 p
Line 324: Line 415:
 
   font-size: 24px;
 
   font-size: 24px;
 
   line-height: 30px;
 
   line-height: 30px;
−
   font-family: Quicksand;
+
   font-family: "Quicksand";
 
}
 
}
 +
section.section2
 +
{
 +
  padding: 100px 0px 100px;
 +
  background-color: grey;
 +
  color:white;
 +
}
 +
section.section2 p
 +
{
 +
  width: 80vw;
 +
  margin:30px auto;
 +
  text-align: center;
 +
  font-size: 24px;
 +
  line-height: 30px;
 +
  font-family: "Quicksand";
  
−
</style>
+
}
−
</html>
+
section.section3
 +
{
 +
  padding: 100px 0px 100px;
 +
 
 +
}
 +
section.section3 p
 +
{
 +
  width: 80vw;
 +
  margin:30px auto;
 +
  text-align: center;
 +
  font-size: 24px;
 +
  line-height: 30px;
 +
  font-family: "Quicksand";
 +
}
 +
section.section4
 +
{
 +
  padding: 100px 0px 100px;
 +
  background-color: grey;
 +
  color:white;
 +
}
 +
section.section4 p
 +
{
 +
  width: 80vw;
 +
  margin:30px auto;
 +
  text-align: center;
 +
  font-size: 24px;
 +
  line-height: 30px;
 +
  font-family: "Quicksand";
 +
}
 +
section.section5
 +
{
 +
  padding: 100px 0px 100px;
 +
}
 +
section.section5 p
 +
{
 +
  width: 80vw;
 +
  margin:30px auto;
 +
  text-align: center;
 +
  font-size: 24px;
 +
  line-height: 30px;
 +
  font-family: "Quicksand";
 +
}

Revision as of 17:21, 13 September 2018

@import url('https://static.igem.org/mediawiki/2018/5/52/T--UCL--QuicksandReg.eot'); @import url('https://fonts.googleapis.com/css?family=Quicksand');

@import url("https://static.igem.org/mediawiki/2018/6/6a/T--UCL--futuramed.eot");

/*Futura*/ @font-face { 

 font-family: "Futura";
 font-style: normal;
 font-weight: 400;
   src: url("https://static.igem.org/mediawiki/2018/6/6a/T--UCL--futuramed.eot");
   src: local('Futura'), local('Futura'),
   url("https://static.igem.org/mediawiki/2018/6/6a/T--UCL--futuramed.eot") format("embedded-opentype"),
   url("https://static.igem.org/mediawiki/2018/c/ce/T--UCL--futuramed.woff") format("woff"),
   url("https://static.igem.org/mediawiki/2018/e/e6/T--UCL--futuramed.ttf") format("truetype"),
 }

/* Quicksand regular */ @font-face { 

   font-family: 'Quicksand';
   font-style: normal;
   font-weight: 400;
   src: url('https://static.igem.org/mediawiki/2018/5/52/T--UCL--QuicksandReg.eot');
   src: local('Quicksand Regular'), local('Quicksand-Regular'),
           url('https://static.igem.org/mediawiki/2018/5/52/T--UCL--QuicksandReg.eot') format('embedded-opentype'),
           url('https://static.igem.org/mediawiki/2018/a/aa/T--UCL--quicksand.ttf') format('truetype'),
           url('https://static.igem.org/mediawiki/2018/7/74/T--UCL--QuicksandReg1.woff') format('woff');

}

  1. sideMenu,
  2. top_title {
   display: none;

}

  1. content {
   width: 100vw;
   padding: 0px;
   border: none;
   color: black;
   margin-left: auto;
   margin-right: auto;
   background-color: #fff;
   position: relative;

}

  1. top_menu_under {
   height: 0px !important;

} /* ====NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR========NAVBAR==== */

  • {
 margin:0;
 padding:0;

}

@media screen and (min-width: 1024px) { 

   nav, nav ul li a {
       height: 8.5vh;
   }

}

@media screen and (max-width: 1023px) { 

   nav, nav ul li a {
       height: 5vh;
   }

}

nav { 

 font-family: "Quicksand";
 font-weight:100;
 position: fixed;
 top:0;
 left:0;
 width:100%;
 box-sizing: border-box;
 transition: 0.3s;
 background: rgba(255, 255, 255, 0.95);
 border-bottom: :1px solid rgba(0, 0, 0, 1);
 z-index:3;

}

nav.black { 

 background: rgba(0,0,0,0.75);

} .div-logo { 

   position: relative;
   top: 3vh;
   left:1.5vw;
   z-index: 9999;

} .img-logo { 

 width:5.952380952vw;
 float:left;
 transition:0.3s;
 box-shadow: 5px 5px 10px #d0513a;
 border-radius: 100%;
 z-index: 9999;
 -webkit-transform: translateX(3vh);
transform: translateX(3vh);
position:fixed;

} .black.img-logo {

} nav ul { 

 list-style: none;
 float:right;
 display:flex;
 margin: 0 0 0 0;
 padding: 0;
 position:relative;

} nav ul li { 

 list-style: none;

} nav ul li a { 

 color: rgba(242, 77, 25,1);
 text-decoration: none;
 text-transform: uppercase;
 transition:0.3s;
 box-sizing: border-box;
 position: relative;
 font-size: 0.9vw;
 display: block;
 text-align: center;
 width: 12vw;
 vertical-align: middle;
 display: table-cell;

} nav.black ul li a { 

 color: rgba(255, 255, 255, 1);

} nav ul li a:before { 

 content: ;
 position: absolute;
 top: 0;
 left:0;
 width:100%;
 height:100%;
 background:rgba(242, 77, 25,1);
 transform-origin:top;
 transform:scaleY(0);
 transition: 0.5s;
 color:#000;
 z-index: -1;

} nav ul li a:hover { 

 color:rgba(255, 255, 255, 1);
 text-decoration: none;

} nav ul li a:hover:before { 

 transform-origin:top;
 transform:scaleY(1);

} nav.black ul li a:before { 

 background:rgba(255,255,255,0.75);

} nav.black ul li a:hover { 

 color:rgba(0,0,0,1);
 text-decoration: none;

} nav.black ul li a:hover:before { 

 transform-origin:top;
 transform:scaleY(1);

}

nav ul li a:focus { 

 outline:inherit;

} nav ul li ul { 

 display:none;
 text-align: center;
 max-width: 200px;
 transition:0.3s;
 opacity: 0;
 visibility: hidden;
 transform:translateY(0px);
 background:rgba(255, 255, 255, 0.9);

} nav.black ul li ul { 

 background:rgba(0,0,0,0.75);

} nav ul li:hover ul { 

 opacity: 1;
 visibility: visible;
 display:block;

} nav ul li ul li a { 

 text-align: center;
 position: relative;
 vertical-align: middle;
 display: table-cell;

} nav.black ul li ul li a {

}

@media screen and (max-width:700px) { 

   .particle-bg-intro, .scroll, .section1, .section2, .section3,
   .section4, .section5 {
       width: 100%;
   }

}

@media screen and (max-width:700px) {.particle-bg-heading, .acronym, .acronym1, .acronym2, .acronym3, .acronym4, .heading, .heading1, .heading2, .heading3, .heading4, { 

   width: 100%;
   }

}

/* ====HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING========HEADING==== */

section.sec1 { 

 width: 100%;
 height: 100vh;
 background: url('https://static.igem.org/mediawiki/2018/7/7d/T--UCL--SilkStock1.jpg');
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center;
 background-color: #000000;
 -webkit-filter: blur(3px);
 -moz-filter: blur(3px);
 -o-filter: blur(3px);
 -ms-filter: blur(3px);
 filter: blur(3px);
 position: relative;
 min-height: 1px;
 -ms-flex: 0 0 100%;
 flex: 0 0 100%;
 max-width: 100%;
 padding: 5em 1em;
 border-radius: 0.3em;

} div.particle-bg-heading { 

 position: absolute;
 top:15vh;
 left:10vw;
 right:10vw;

}

@media screen and (min-width: 1024px) { 

   .acronym {
       font-size: 8vw;
   }

} @media screen and (max-width: 1023px) { 

   .acronym{
       font-size: 9vw;
   }

} @media screen and (min-width: 1024px) { 

   .heading {
       font-size: 5vw;
   }

} @media screen and (max-width: 1023px) { 

   .heading{
       font-size: 6vw;
   }

} .particle-bg-heading .acronym { 

 color: rgba(242, 77, 25,1);
 font-family: "Quicksand",serif;
 animation-delay: 0s;
 font-weight: 600;
 display:inline-block;

} .particle-bg-heading .acronym1 { 

 animation-duration: 1s;
 animation-iteration-count: 1;
 line-height: 1em;

}

.particle-bg-heading .acronym2 { 

 animation-duration: 1s;
 animation-iteration-count: 1;
 line-height: 1em;

} .particle-bg-heading .acronym3 { 

 animation-duration: 1s;
 animation-iteration-count: 1;
 line-height: 1em;

} .particle-bg-heading .acronym4 { 

 animation-duration: 1s;
 animation-iteration-count: 1;
 line-height: 1em;

} .particle-bg-heading .heading { 

 color:#ffffff;
 font-family: "Futura",serif;
 font-weight: 100;

} .particle-bg-heading .heading1 { 

 animation-delay: 1.5s;
 animation-duration: 1.5s;
 animation-iteration-count: 1;
 line-height: 1em;
display:inline-block;

} .particle-bg-heading .heading2 { 

 animation-duration: 1.5s;
 animation-iteration-count: 1;
 animation-delay: 2s;
 line-height: 1em;
 display:inline-block;

} .particle-bg-heading .heading3 { 

 animation-duration: 1.5s;
 animation-iteration-count: 1;
 animation-delay: 2.5s;
 line-height: 1em;

display:inline-block; } .particle-bg-heading .heading4 { 

 animation-duration: 1.5s;
 animation-iteration-count: 1;
 animation-delay: 3s;
 line-height: 1em;
 display:inline-block;

}

.particle-bg-intro { 

 font-family: "Quicksand";
 font-weight: 100;
 position: relative;
 line-height: 1.75;
 color: #ffffff;
 animation-timing-function: ease-in;
 animation-delay: 4s;
 text-align: justify;

}

.scroll { 

 font-size: 96px;
 color:#ffffff;
 animation-iteration-count: infinite;
 animation-duration: 5s;
 animation-delay: 0s;
 animation-direction: alternate;
 position: absolute;
 text-align: center;
 text-decoration: none;

}

a.nostyle:link { 

   text-decoration: inherit;
   color: inherit;
   cursor: auto;

}

a.nostyle:visited { 

   text-decoration: inherit;
   color: inherit;
   cursor: auto;

} section.section1 { 

 padding: 100px 0px 100px;

} section.section1 p { 

 width: 80vw;
 margin:30px auto;
 text-align: center;
 font-size: 24px;
 line-height: 30px;
 font-family: "Quicksand";

} section.section2 { 

 padding: 100px 0px 100px;
 background-color: grey;
 color:white;

} section.section2 p { 

 width: 80vw;
 margin:30px auto;
 text-align: center;
 font-size: 24px;
 line-height: 30px;
 font-family: "Quicksand";

} section.section3 { 

 padding: 100px 0px 100px;

} section.section3 p { 

 width: 80vw;
 margin:30px auto;
 text-align: center;
 font-size: 24px;
 line-height: 30px;
 font-family: "Quicksand";

} section.section4 { 

 padding: 100px 0px 100px;
 background-color: grey;
 color:white;

} section.section4 p { 

 width: 80vw;
 margin:30px auto;
 text-align: center;
 font-size: 24px;
 line-height: 30px;
 font-family: "Quicksand";

} section.section5 { 

 padding: 100px 0px 100px;

} section.section5 p { 

 width: 80vw;
 margin:30px auto;
 text-align: center;
 font-size: 24px;
 line-height: 30px;
 font-family: "Quicksand";

}