Difference between revisions of "Template:Vilnius-Lithuania/CSS/footer"

 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
#footerWrapper {
 
#footerWrapper {
−
width: 100%;
+
    width: 100%;
−
border-top: solid 25px #6281ef;
+
    border-top: solid 25px #6281ef;
−
font-family:'montserrat-light', sans-serif;
+
    font-family: 'montserrat-light', sans-serif;
−
text-transform: uppercase;
+
    ;
−
background-color: #fafafc;
+
    text-transform: uppercase;
−
        position:relative;
+
    background-color: #fafafc;
−
        z-index:3
+
 
}
 
}
  
 
#footerWrapper .container {
 
#footerWrapper .container {
−
width: unset
+
    width: unset
 
}
 
}
  
 
#upperFooter {
 
#upperFooter {
−
height: 180px;
+
    height: fit-content;
−
background-color: #fafafc;
+
    background-color: #fafafc;
−
display: flex;
+
    display: flex;
−
align-items: center;
+
    align-items: center;
−
justify-content: space-evenly;
+
    justify-content: space-evenly;
−
padding: 10px
+
    padding: 10px;
 +
    box-sizing: border-box;
 
}
 
}
  
 
#upperFooter #contacts {
 
#upperFooter #contacts {
−
max-width: 45vw;
+
    max-width: 45vw;
−
height: 100%
+
    height: 100%
 
}
 
}
  
 
#upperFooter #contacts #contactsWrapper {
 
#upperFooter #contacts #contactsWrapper {
−
display: flex;
+
    display: flex;
−
align-items: center;
+
    align-items: center;
−
width: fit-content;
+
    width: fit-content;
−
justify-content: center;
+
    justify-content: center;
−
height: 100%
+
    height: 100%
 
}
 
}
  
 
#upperFooter #contacts #contactsWrapper #contactus {
 
#upperFooter #contacts #contactsWrapper #contactus {
−
padding-right: 10px
+
    padding-right: 10px
 
}
 
}
  
 
#upperFooter #contacts #image-placeholder {
 
#upperFooter #contacts #image-placeholder {
−
height: 100px;
+
    height: 9vw;
−
width: 100px;
+
    width: 9vw;
−
border-radius: 100px;
+
    border-right: solid 1px #121212;
 +
    padding-right: 30px;
 
}
 
}
  
 
#upperFooter #contacts #image-placeholder img {
 
#upperFooter #contacts #image-placeholder img {
−
height: 100%;
+
    height: 100%;
−
width: 100%
+
    width: 100%
 
}
 
}
  
 
#upperFooter #contacts #igem-info {
 
#upperFooter #contacts #igem-info {
−
display: flex;
+
    display: flex;
−
height: 70%;
+
    height: 100%;
−
font-size: 0.8em;
+
    font-size: 0.8em;
−
padding-left: 30px;
+
    padding-left: 30px;
−
border-left: solid 2px #121212;
+
    justify-content: space-around;
−
justify-content: space-around;
+
    align-items: center;
−
align-items: center;
+
−
margin-left: 30px
+
 
}
 
}
  
 
#upperFooter #contacts #igem-info h3 {
 
#upperFooter #contacts #igem-info h3 {
−
margin: 0;
+
    margin: 0;
−
margin-bottom: 10px
+
    margin-bottom: 10px
 
}
 
}
  
 
#upperFooter #contacts a {
 
#upperFooter #contacts a {
−
font-size: 0.9em;
+
    font-size: 0.9em;
−
text-transform: initial;
+
    text-transform: initial;
−
font-family: 'montserrat-light', sans-serif;
+
    font-family: Lato, sans-serif;
−
text-decoration: none;
+
    text-decoration: none;
−
color: #121212;
+
    color: #121212;
−
line-height: 2em;
+
    line-height: 2em;
−
padding-right: 0px;
+
    padding-right: 0px;
 
}
 
}
−
 
  
 
#upperFooter #sponsors {
 
#upperFooter #sponsors {
−
height: 100%;
+
    height: 100%;
−
display: flex;
+
    display: flex;
−
align-items: center;
+
    align-items: center;
−
box-sizing: border-box;
+
    box-sizing: border-box;
−
max-width: 55vw
+
    max-width: 55vw
 
}
 
}
  
 
#upperFooter #sponsors #mainSponsors {
 
#upperFooter #sponsors #mainSponsors {
−
height: 100%;
+
    display: grid;
−
 
+
    grid-template-columns: 1fr;
−
max-width: 16vw
+
    grid-template-rows: 1fr 1fr;
−
}
+
    gap: 10px 0px;
−
 
+
−
.mainS {
+
−
box-sizing: border-box;
+
−
margin: 0 auto;
+
−
padding: 5px;
+
−
display: flex;
+
−
align-items: center;
+
−
height: 50%
+
 
}
 
}
  
 
#upperFooter #sponsors #otherSponsors {
 
#upperFooter #sponsors #otherSponsors {
−
height: 65%;
+
    display: flex
−
margin-left: 10px;
+
−
display: flex
+
 
}
 
}
  
 
#lowerFooter {
 
#lowerFooter {
−
color: #fafafc;
+
    color: #fafafc;
−
height: 250px;
+
    height: 20vh;
−
box-sizing: border-box;
+
    box-sizing: border-box;
−
background-color: #121212;
+
    background-color: #121212;
 
}
 
}
  
 
#lowerFooter #navigation {
 
#lowerFooter #navigation {
−
background-color: #121212;
+
    background-color: #121212;
−
display: flex;
+
    display: flex;
−
justify-content: space-around
+
    justify-content: space-around
 
}
 
}
  
 
#lowerFooter ul {
 
#lowerFooter ul {
−
list-style: none;
+
    list-style: none;
−
padding-inline-start: 0;
+
    padding-inline-start: 0;
−
margin: 0;
+
    margin: 0;
 
}
 
}
  
 
#lowerFooter h2 {
 
#lowerFooter h2 {
−
color: #fafafc;
+
    padding-bottom: 20px;
−
padding-bottom: 20px;
+
    font-family: 'montserrat-bold', sans-serif;
−
font-family: 'montserrat-bold';
+
 
}
 
}
  
 
#lowerFooter #navigation {
 
#lowerFooter #navigation {
−
padding: 40px;
+
    padding: 40px;
−
font-size: smaller
+
    font-size: smaller
 
}
 
}
  
 
#footerWrapper #lowerFooter a {
 
#footerWrapper #lowerFooter a {
−
text-decoration: none;
+
    text-decoration: none;
−
transition-duration: 0.2s;
+
    transition-duration: 0.2s;
−
color: #fafafc;
+
    color: #fafafc;
−
text-transform: capitalize;
+
    text-transform: capitalize;
−
font-weight: 100;
+
    font-weight: 100;
−
line-height: 2em
+
    line-height: 2em
 
}
 
}
  
Line 148: Line 135:
 
#footerWrapper #lowerFooter a:focus,
 
#footerWrapper #lowerFooter a:focus,
 
#footerWrapper #lowerFooter a:visited {
 
#footerWrapper #lowerFooter a:visited {
−
color: #fafafc
+
    color: #fafafc
 
}
 
}
  
 
#footerWrapper #lowerFooter a:hover {
 
#footerWrapper #lowerFooter a:hover {
−
color: rgba(255, 255, 255, 0.4);
+
    color: rgba(255, 255, 255, 0.4);
−
text-decoration: none
+
    text-decoration: none
 
}
 
}
  
 
#projectList {
 
#projectList {
−
display: grid;
+
    display: grid;
−
grid-template-columns: 1fr 1fr;
+
    grid-template-columns: 1fr 1fr;
−
grid-auto-flow: column;
+
    grid-auto-flow: column;
−
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
−
gap: 0px 10px;
+
    gap: 0px 10px;
 
}
 
}
  
 
#mainSponsors img {
 
#mainSponsors img {
−
max-width: 14vw;
+
    max-width: 16vw;
−
height: auto;
+
−
max-height: 100%
+
 
}
 
}
  
−
#otherSponsors img {
+
.otherS img {
−
max-width: 10vw;
+
    max-width: 10vw;
−
height: auto;
+
    height: auto;
−
max-height: 100%
+
−
}
+
−
 
+
−
.otherS {
+
−
display: flex;
+
−
align-items: center;
+
−
height: 50%
+
 
}
 
}
  
 
.links-icons {
 
.links-icons {
−
display: flex;
+
    display: flex;
−
align-items: center;
+
    align-items: center;
−
justify-content: space-around;
+
    justify-content: space-around;
 
}
 
}
  
 
.links-icons svg {
 
.links-icons svg {
−
fill: #121212;
+
    fill: #121212;
−
width: 2em;
+
    width: 2em;
−
padding-right: 5px
+
    padding-right: 5px
 
}
 
}
  
 
#upperFooter #sponsors #othSWrap {
 
#upperFooter #sponsors #othSWrap {
−
max-width: 38vw
+
    display: grid;
 +
    grid-template-columns: 1fr 1fr 1fr;
 +
    grid-template-rows: 1fr 1fr;
 +
    gap: 10px 0px;
 
}
 
}
−
 
  
 
@media (max-width:768px) {
 
@media (max-width:768px) {
−
#mainSponsors img {
+
    #mainSponsors img {
−
max-width: 13vw;
+
        max-width: 13vw;
−
height: auto;
+
        height: auto;
−
 
+
    }
−
}
+
    #upperFooter #contacts {
−
 
+
        max-width: 40vw;
−
#upperFooter #contacts {
+
    }
−
max-width: 40vw;
+
    #upperFooter #sponsors {
−
}
+
        max-width: 60vw;
−
 
+
    }
−
#upperFooter #sponsors {
+
    #otherSponsors img {
−
max-width: 60vw;
+
        max-width: 10vw;
−
}
+
        height: auto;
−
 
+
    }
−
#otherSponsors img {
+
    #upperFooter #sponsors #mainSponsors {
−
max-width: 10vw;
+
        max-width: 100%
−
height: auto;
+
    }
−
 
+
    #upperFooter #sponsors #othsWrap {
−
}
+
        max-width: 100%
−
 
+
    }
−
#upperFooter #sponsors #mainSponsors {
+
    #upperFooter #contacts #igem-info {
−
 
+
        font-size: 0.7em;
−
max-width: 100%
+
        padding-left: 15px;
−
}
+
        margin-left: 15px
−
 
+
    }
−
#upperFooter #sponsors #othsWrap {
+
    #lowerFooter h2 {
−
 
+
        padding-bottom: 10px;
−
max-width: 100%
+
        font-size: 0.9em
−
}
+
    }
−
 
+
    #lowerFooter ul {
−
#upperFooter #contacts #image-placeholder {
+
        font-size: 0.8em
−
max-width: 10vw;
+
    }
−
max-height: 10vw;
+
    .links-icons svg {
−
 
+
        width: 1.5em;
−
}
+
    }
−
 
+
    #upperFooter #contacts #igem-info h3 {
−
#upperFooter #contacts #igem-info {
+
        font-size: 0.8em;
−
font-size: 0.7em;
+
    }
−
padding-left: 15px;
+
#upperFooter #contacts #image-placeholder {
−
margin-left: 15px
+
    border-right: solid 1px #fafafc;
−
}
+
}
−
 
+
−
#lowerFooter h2 {
+
−
padding-bottom: 10px;
+
−
font-size: 0.9em
+
−
}
+
−
 
+
−
#lowerFooter ul {
+
−
font-size: 0.8em
+
−
}
+
−
 
+
−
.links-icons svg {
+
−
width: 1.5em;
+
−
}
+
−
 
+
−
#upperFooter #contacts #igem-info h3 {
+
−
font-size: 0.8em;
+
−
}
+
 
}
 
}
  
 
@media (max-width:420px) {
 
@media (max-width:420px) {
−
#upperFooter {
+
    #upperFooter {
−
display: block;
+
        display: block;
−
height: fit-content;
+
        height: fit-content;
−
padding: 0;
+
        padding: 0;
−
transform: rotate(-180deg);
+
        transform: rotate(-180deg);
−
}
+
    }
−
 
+
    #upperFooter #sponsors {
−
#upperFooter #sponsors {
+
        display: block;
−
display: block;
+
        padding-left: 0;
−
padding-left: 0;
+
        max-width: none
−
max-width: none
+
    }
−
}
+
    #upperFooter #sponsors #mainSponsors {
−
 
+
        display: flex;
−
#upperFooter #sponsors #mainSponsors {
+
        justify-content: center;
−
display: flex;
+
        margin-top: 20px;
−
justify-content: center;
+
        margin-bottom: 20px;
−
margin-top: 20px;
+
        max-width: none
−
margin-bottom: 20px;
+
    }
−
max-width: none
+
    #mainSponsors img {
−
}
+
        max-width: 40vw;
−
 
+
        height: auto;
−
#mainSponsors img {
+
    }
−
max-width: 40vw;
+
    #otherSponsors img {
−
height: auto;
+
        max-width: 30vw;
−
}
+
        height: auto;
−
 
+
    }
−
#otherSponsors img {
+
    #upperFooter #sponsors #otherSponsors {
−
max-width: 30vw;
+
        display: block
−
height: auto;
+
    }
−
}
+
    #upperFooter #sponsors #otherSponsors .sponsors-row {
−
 
+
        display: flex
−
#upperFooter #sponsors #otherSponsors {
+
    }
−
display: block
+
    .mainS {
−
}
+
        margin: 0;
−
 
+
    }
−
#upperFooter #sponsors #otherSponsors .sponsors-row {
+
    #upperFooter #sponsors #othSWrap {
−
display: flex
+
        width: fit-content;
−
}
+
        margin: 0 auto;
−
 
+
        max-width: none;
−
.mainS {
+
        padding-bottom: 30px;
−
margin: 0;
+
        grid-template-columns: 1fr 1fr;
−
}
+
        grid-template-rows: 1fr 1fr 1fr;
−
 
+
    }
−
#upperFooter #sponsors #othSWrap {
+
    .otherS {
−
width: fit-content;
+
        justify-content: center
−
margin: 0 auto;
+
    }
−
max-width: none;
+
    .otherS img {
−
padding-bottom: 30px
+
        max-width: 25vw;
−
}
+
    }
−
 
+
    #upperFooter #contacts {
−
.otherS {
+
        background-color: #6281ef;
−
justify-content: center
+
        height: 10em;
−
}
+
        max-width: 100vw;
−
 
+
        display: flex;
−
#upperFooter #contacts {
+
        justify-content: center
−
background-color: #6281ef;
+
    }
−
height: 10em;
+
    #upperFooter #contacts #contactsWrapper {
−
max-width: 100vw;
+
        width: 80%
−
display: flex;
+
    }
−
justify-content: center
+
    #lowerFooter {
−
}
+
        height: fit-content;
−
 
+
        transform: rotate(-180deg);
−
#upperFooter #contacts #contactsWrapper {
+
        border-top: solid 25px #6281ef;
−
width: 80%
+
    }
−
}
+
    #lowerFooter #navigation {
−
 
+
        display: block;
−
#lowerFooter {
+
    }
−
height: fit-content;
+
    #footerWrapper {
−
transform: rotate(-180deg);
+
        border: none;
−
border-top: solid 25px #6281ef;
+
        transform: rotate(180deg);
−
 
+
    }
−
}
+
    #lowerFooter ul {
−
 
+
        overflow: hidden;
−
#lowerFooter #navigation {
+
        max-height: 0;
−
display: block;
+
        transition: max-height 0.2s ease-out;
−
}
+
        margin-top: 10px;
−
 
+
        margin-bottom: 10px;
−
#footerWrapper {
+
    }
−
border: none;
+
    #lowerFooter #navigation h2 {
−
transform: rotate(180deg);
+
        cursor: pointer;
−
}
+
        transition: 0.4s;
−
 
+
        font-size: 1.6em
−
#upperFooter #contacts #igem-info {
+
    }
−
border-left: solid 2px #fafafc;
+
    #lowerFooter ul li {
−
}
+
        font-size: 1.5em
−
 
+
    }
−
#lowerFooter ul {
+
    #upperFooter #contacts #igem-info h3 {
−
overflow: hidden;
+
        color: #fafafc;
−
max-height: 0;
+
        font-size: 1em
−
transition: max-height 0.2s ease-out;
+
    }
−
margin-top: 10px;
+
    #upperFooter #contacts #image-placeholder {
−
margin-bottom: 10px;
+
        height: 20vw;
−
}
+
        width: 20vw;
−
 
+
    }
−
#lowerFooter #navigation h2 {
+
    .links-icons svg {
−
cursor: pointer;
+
        fill: #fcfcfa
−
transition: 0.4s;
+
    }
−
font-size: 1.6em
+
−
}
+
−
 
+
−
#lowerFooter ul li {
+
−
font-size: 1.5em
+
−
}
+
−
 
+
−
#upperFooter #contacts #igem-info h3 {
+
−
color: #fafafc;
+
−
font-size: 1em
+
−
}
+
−
 
+
−
 
+
−
#upperFooter #contacts #image-placeholder {
+
−
background-color: #fafafc;
+
−
max-height: 20vw;
+
−
max-width: 20vw
+
−
}
+
−
 
+
−
.links-icons svg {
+
−
fill: #fcfcfa
+
−
}
+
 
}
 
}
  
 
@media (max-width:300px) {
 
@media (max-width:300px) {
−
#upperFooter #contacts #igem-info h3 {
+
    #upperFooter #contacts #igem-info h3 {
−
font-size: 0.7em
+
        font-size: 0.7em
−
}
+
    }
−
 
+
    #upperFooter #contacts #igem-info {
−
#upperFooter #contacts #igem-info {
+
        border: none
−
border: none
+
    }
−
}
+
    #upperFooter #contacts #image-placeholder {
−
 
+
        max-width: 20vw;
−
#upperFooter #contacts #image-placeholder {
+
        max-height: 20vw
−
max-width: 20vw;
+
    }
−
max-height: 20vw
+
    .links-icons svg {
−
}
+
        max-height: 14px;
−
 
+
    }
−
.links-icons svg {
+
    #igem-info {
−
max-height: 14px;
+
        max-width: 40vw
−
}
+
    }
−
 
+
−
#igem-info {
+
−
max-width: 40vw
+
−
}
+
−
 
+
 
}
 
}

Latest revision as of 23:24, 18 December 2020

  1. footerWrapper {
   width: 100%;
   border-top: solid 25px #6281ef;
   font-family: 'montserrat-light', sans-serif;
   ;
   text-transform: uppercase;
   background-color: #fafafc;

}

  1. footerWrapper .container {
   width: unset

}

  1. upperFooter {
   height: fit-content;
   background-color: #fafafc;
   display: flex;
   align-items: center;
   justify-content: space-evenly;
   padding: 10px;
   box-sizing: border-box;

}

  1. upperFooter #contacts {
   max-width: 45vw;
   height: 100%

}

  1. upperFooter #contacts #contactsWrapper {
   display: flex;
   align-items: center;
   width: fit-content;
   justify-content: center;
   height: 100%

}

  1. upperFooter #contacts #contactsWrapper #contactus {
   padding-right: 10px

}

  1. upperFooter #contacts #image-placeholder {
   height: 9vw;
   width: 9vw;
   border-right: solid 1px #121212;
   padding-right: 30px;

}

  1. upperFooter #contacts #image-placeholder img {
   height: 100%;
   width: 100%

}

  1. upperFooter #contacts #igem-info {
   display: flex;
   height: 100%;
   font-size: 0.8em;
   padding-left: 30px;
   justify-content: space-around;
   align-items: center;

}

  1. upperFooter #contacts #igem-info h3 {
   margin: 0;
   margin-bottom: 10px

}

  1. upperFooter #contacts a {
   font-size: 0.9em;
   text-transform: initial;
   font-family: Lato, sans-serif;
   text-decoration: none;
   color: #121212;
   line-height: 2em;
   padding-right: 0px;

}

  1. upperFooter #sponsors {
   height: 100%;
   display: flex;
   align-items: center;
   box-sizing: border-box;
   max-width: 55vw

}

  1. upperFooter #sponsors #mainSponsors {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr 1fr;
   gap: 10px 0px;

}

  1. upperFooter #sponsors #otherSponsors {
   display: flex

}

  1. lowerFooter {
   color: #fafafc;
   height: 20vh;
   box-sizing: border-box;
   background-color: #121212;

}

  1. lowerFooter #navigation {
   background-color: #121212;
   display: flex;
   justify-content: space-around

}

  1. lowerFooter ul {
   list-style: none;
   padding-inline-start: 0;
   margin: 0;

}

  1. lowerFooter h2 {
   padding-bottom: 20px;
   font-family: 'montserrat-bold', sans-serif;

}

  1. lowerFooter #navigation {
   padding: 40px;
   font-size: smaller

}

  1. footerWrapper #lowerFooter a {
   text-decoration: none;
   transition-duration: 0.2s;
   color: #fafafc;
   text-transform: capitalize;
   font-weight: 100;
   line-height: 2em

}

  1. footerWrapper #lowerFooter a:active,
  2. footerWrapper #lowerFooter a:focus,
  3. footerWrapper #lowerFooter a:visited {
   color: #fafafc

}

  1. footerWrapper #lowerFooter a:hover {
   color: rgba(255, 255, 255, 0.4);
   text-decoration: none

}

  1. projectList {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-auto-flow: column;
   grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
   gap: 0px 10px;

}

  1. mainSponsors img {
   max-width: 16vw;

}

.otherS img { 

   max-width: 10vw;
   height: auto;

}

.links-icons { 

   display: flex;
   align-items: center;
   justify-content: space-around;

}

.links-icons svg { 

   fill: #121212;
   width: 2em;
   padding-right: 5px

}

  1. upperFooter #sponsors #othSWrap {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-template-rows: 1fr 1fr;
   gap: 10px 0px;

}

@media (max-width:768px) { 

   #mainSponsors img {
       max-width: 13vw;
       height: auto;
   }
   #upperFooter #contacts {
       max-width: 40vw;
   }
   #upperFooter #sponsors {
       max-width: 60vw;
   }
   #otherSponsors img {
       max-width: 10vw;
       height: auto;
   }
   #upperFooter #sponsors #mainSponsors {
       max-width: 100%
   }
   #upperFooter #sponsors #othsWrap {
       max-width: 100%
   }
   #upperFooter #contacts #igem-info {
       font-size: 0.7em;
       padding-left: 15px;
       margin-left: 15px
   }
   #lowerFooter h2 {
       padding-bottom: 10px;
       font-size: 0.9em
   }
   #lowerFooter ul {
       font-size: 0.8em
   }
   .links-icons svg {
       width: 1.5em;
   }
   #upperFooter #contacts #igem-info h3 {
       font-size: 0.8em;
   }
  1. upperFooter #contacts #image-placeholder {
   border-right: solid 1px #fafafc;

} }

@media (max-width:420px) { 

   #upperFooter {
       display: block;
       height: fit-content;
       padding: 0;
       transform: rotate(-180deg);
   }
   #upperFooter #sponsors {
       display: block;
       padding-left: 0;
       max-width: none
   }
   #upperFooter #sponsors #mainSponsors {
       display: flex;
       justify-content: center;
       margin-top: 20px;
       margin-bottom: 20px;
       max-width: none
   }
   #mainSponsors img {
       max-width: 40vw;
       height: auto;
   }
   #otherSponsors img {
       max-width: 30vw;
       height: auto;
   }
   #upperFooter #sponsors #otherSponsors {
       display: block
   }
   #upperFooter #sponsors #otherSponsors .sponsors-row {
       display: flex
   }
   .mainS {
       margin: 0;
   }
   #upperFooter #sponsors #othSWrap {
       width: fit-content;
       margin: 0 auto;
       max-width: none;
       padding-bottom: 30px;
       grid-template-columns: 1fr 1fr;
       grid-template-rows: 1fr 1fr 1fr;
   }
   .otherS {
       justify-content: center
   }
   .otherS img {
       max-width: 25vw;
   }
   #upperFooter #contacts {
       background-color: #6281ef;
       height: 10em;
       max-width: 100vw;
       display: flex;
       justify-content: center
   }
   #upperFooter #contacts #contactsWrapper {
       width: 80%
   }
   #lowerFooter {
       height: fit-content;
       transform: rotate(-180deg);
       border-top: solid 25px #6281ef;
   }
   #lowerFooter #navigation {
       display: block;
   }
   #footerWrapper {
       border: none;
       transform: rotate(180deg);
   }
   #lowerFooter ul {
       overflow: hidden;
       max-height: 0;
       transition: max-height 0.2s ease-out;
       margin-top: 10px;
       margin-bottom: 10px;
   }
   #lowerFooter #navigation h2 {
       cursor: pointer;
       transition: 0.4s;
       font-size: 1.6em
   }
   #lowerFooter ul li {
       font-size: 1.5em
   }
   #upperFooter #contacts #igem-info h3 {
       color: #fafafc;
       font-size: 1em
   }
   #upperFooter #contacts #image-placeholder {
       height: 20vw;
       width: 20vw;
   }
   .links-icons svg {
       fill: #fcfcfa
   }

}

@media (max-width:300px) { 

   #upperFooter #contacts #igem-info h3 {
       font-size: 0.7em
   }
   #upperFooter #contacts #igem-info {
       border: none
   }
   #upperFooter #contacts #image-placeholder {
       max-width: 20vw;
       max-height: 20vw
   }
   .links-icons svg {
       max-height: 14px;
   }
   #igem-info {
       max-width: 40vw
   }

}