Difference between revisions of "Template:CPU CHINA/common CSS"

Line 1: Line 1:
−
#contain .left {
+
@font-face {
−
    position: -webkit-sticky;
+
  font-family: MONTSERRAT-BLACK1;
−
    position: sticky;
+
  src: url("https://static.igem.org/mediawiki/2021/0/04/T--CPU_CHINA--MONTSERRAT-BLACK1.woff")
−
    float: left;
+
     format("woff");
−
     width: 25%;
+
−
    top: 20%;
+
 
}
 
}
  
−
#contain .left .Frosting {
+
@font-face {
−
    position: absolute;
+
  font-family: MONTSERRAT-BLACKITALIC2;
−
    top: 0;
+
  src: url("https://static.igem.org/mediawiki/2021/d/d4/T--CPU_CHINA--MONTSERRAT-BLACKITALIC2.woff")
−
    left: 15%;
+
     format("woff");
−
    -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3),
+
−
        0 0 40px rgba(0, 0, 0, 0.1) inset;
+
−
    -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3),
+
−
        0 0 40px rgba(0, 0, 0, 0.1) inset;
+
−
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
+
−
     -o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
+
−
    z-index: 2;
+
 
}
 
}
  
−
#contain .left .catalogue-title {
+
@font-face {
−
    position: absolute;
+
  font-family: CABIN-REGULAR;
−
    top: 25px;
+
  src: url("https://static.igem.org/mediawiki/2021/b/b3/T--CPU_CHINA--CABIN-REGULAR.woff")
−
    left: 20%;
+
     format("woff");
−
    width: 60%;
+
−
    text-align: center;
+
−
    color: #202020;
+
−
    font-family: "MONTSERRAT-BLACK1";
+
−
    font-size: large;
+
−
    font-weight: 800;
+
−
     z-index: 3;
+
 
}
 
}
  
−
#contain .left .catalogue {
+
@font-face {
−
    position: absolute;
+
  font-family: CABIN-ITALIC;
−
    padding-left: 14px;
+
  src: url("https://static.igem.org/mediawiki/2021/7/75/T--CPU_CHINA--CABIN-ITALIC.woff")
−
    overflow: hidden;
+
     format("woff");
−
    top: 60px;
+
−
     width: 65%;
+
−
    z-index: 3;
+
 
}
 
}
  
−
#contain .left .catalogue li {
+
@font-face {
−
    color: #404040;
+
  font-family: BLACKITALIC;
−
    margin: 5% 10%;
+
  src: url("https://static.igem.org/mediawiki/2021/6/67/T--CPU_CHINA--BLACKITALIC.woff")
−
    text-overflow: ellipsis;
+
    format("woff");
−
    overflow: hidden;
+
−
    white-space: nowrap;
+
−
    font-family: "CABIN-REGULAR";
+
−
    font-weight: lighter;
+
−
    width: 95%;
+
−
    list-style: square inside url("https://static.igem.org/mediawiki/2021/9/9b/T--CPU_CHINA--circle.svg");
+
 
}
 
}
  
−
#contain .left .catalogue li:hover {
+
body {
−
    list-style: square inside url("https://static.igem.org/mediawiki/2021/5/5b/T--CPU_CHINA--circle2.svg");
+
  background-color: #fafafa;
 
}
 
}
  
−
#contain .left .catalogue .current {
+
* {
−
    color: #0071ff;
+
  box-sizing: border-box;
−
    list-style: square inside url("https://static.igem.org/mediawiki/2021/5/5b/T--CPU_CHINA--circle2.svg");
+
 
}
 
}
  
−
#contain .left .catalogue li:hover a {
+
#contain {
−
    color: #0071ff;
+
  margin-top: -12px;
−
    text-decoration: none;
+
  padding: 0 3% 10%;
 +
  width: 100%;
 +
  background-color: #fafafa;
 +
  z-index: 1;
 +
  text-align: left;
 +
  box-sizing: border-box;
 
}
 
}
  
−
#contain .left .catalogue li:hover .circle {
+
.background {
−
    fill: #0071ff;
+
  position: fixed;
 +
  width: 100%;
 +
  top: 0;
 +
  z-index: -1;
 +
  box-sizing: border-box;
 
}
 
}
  
−
#contain #detail {
+
#header #title {
−
    float: right;
+
  position: fixed;
−
    position: relative;
+
  top: 9vw;
−
    width: 65%;
+
  font-family: "MONTSERRAT-BLACKITALIC2";
−
    margin-right: 8%;
+
  line-height: normal;
−
    padding:5%;
+
  font-weight: bolder;
−
    border-radius: 8px;
+
  font-size: 8vw;
−
    box-sizing: border-box;
+
  color: #fafafa;
−
    line-height: 1.3em;
+
  z-index: -1;
−
    font-size: 1.1em;
+
−
    font-family: "CABIN-REGULAR";
+
−
    font-weight: lighter;
+
−
    -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
+
−
    -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
+
−
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
+
−
    -o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
+
 
}
 
}
  
−
#contain #detail h2 {
+
#header #load {
−
    padding: 10% 0;
+
  position: fixed;
−
    font-family: "MONTSERRAT-BLACKITALIC2";
+
  display: flex;
−
    font-size: 3em;
+
  width: 100%;
−
    text-align: center;
+
  height: 100%;
−
    line-height: normal;
+
  background-color: white;
 +
  align-items: center;
 +
  justify-content: center;
 +
  z-index: 20;
 
}
 
}
  
−
#contain #detail h3 {
+
#header #load img {
−
    margin: 5% 0;
+
  width: 50vmin;
−
    font-size: 2em;
+
−
    font-family: "MONTSERRAT-BLACKITALIC2";
+
−
    color: #424242;
+
−
    text-align: center;
+
−
    line-height: normal;
+
 
}
 
}
  
−
#contain #detail h4{
+
#header #menu {
−
    font-size: 1.5em;
+
  z-index: 10;
−
    margin: 2% 0;
+
 
}
 
}
  
−
#contain #detail p {
+
#header #menu #menuBack {
−
    margin: 2% 0;
+
  position: fixed;
−
    line-height: 1.5em;
+
  width: 100%;
−
    font-size: 1.1em;
+
  height: 100%;
−
    text-indent:2.2em;
+
  box-sizing: border-box;
−
    text-align: justify;
+
  z-index: 10;
−
    font-family: "CABIN-REGULAR";
+
−
    font-weight: lighter;
+
 
}
 
}
  
−
/* 图注 */
+
#header #menu .menu {
−
#contain #detail .imgdescribe{
+
  background-color: #000000ad;
−
    text-indent:0em;
+
  transition: background-color 2s;
−
    text-align: left;
+
−
    font-size: 0.9em;
+
 
}
 
}
  
−
#contain #detail .center{
+
#header #menu #logo {
−
    text-align: center;
+
  position: fixed;
 +
  top: 3vmin;
 +
  left: 1vmin;
 +
  width: 25vmin;
 +
  z-index: 11;
 
}
 
}
  
−
/* 引用 */
+
#header #menu #menuImg {
−
#contain #detail .reference{
+
  position: fixed;
−
    text-indent:0em;
+
  top: 2vmin;
−
    text-align: left;
+
  right: 1vmin;
−
    font-size: 0.9em;
+
  width: 15vmin;
−
    color: #636363;
+
  z-index: 11;
−
}
+
−
#contain #detail strong{
+
−
    font-weight: bold;
+
−
}
+
−
#contain #detail ol {
+
−
list-style: decimal;
+
 
}
 
}
  
−
#contain #detail ul {
+
#header #menu .class {
−
    list-style: disc;
+
  position: fixed;
−
}
+
  top: 14vmin;
−
#contain #detail a{
+
  z-index: 11;
−
    color: #0071fe;
+
−
}
+
−
#contain #detail a:hover{
+
−
    color: #fa0909;
+
−
}
+
−
#contain #detail img {
+
−
    width: 100%;
+
−
    margin: 5% 0 2%;
+
−
}
+
−
#contain #detail em{
+
−
    font-style: italic;
+
 
}
 
}
  
−
/* 下载按钮 */
+
#header #menu .class li {
−
#contain #detail #downLoad {
+
  padding: 6% 0;
−
    position: relative;
+
  margin: 2vmin;
−
    margin: 2vw 0;
+
  border-radius: 30px;
−
    width: 100%;
+
  text-align: center;
−
    height: 7vmin;
+
  font-family: "MONTSERRAT-BLACKITALIC2";
−
    line-height: 7vmin;
+
  font-size: 1.5em;
−
    border-radius: 30px;
+
  font-weight: bolder;
−
    background-image: linear-gradient(to right, #D9D9D9 , #FFFFFF);
+
 
}
 
}
  
−
#contain #detail #downLoad span{
+
#header #menu #class-a {
−
    margin-left: 1vw;
+
  right: 1vmin;
−
    font-size: 0.9em;
+
 
}
 
}
  
−
#contain #detail #downLoad a{
+
#header #menu #class-a li {
−
    position: absolute;
+
  width: 30vmin;
−
    right: 0;
+
  background-color: #fafafa;
−
    width: 20%;
+
  border: #fafafa solid 3px;
−
    height: 7vmin;
+
−
    line-height: 7vmin;
+
−
    border: none;
+
−
    text-align: center;
+
−
    background-color: #0071ff;
+
−
    color: #FAFAFA;
+
−
    font-weight: bold;
+
−
    font-size: 0.8em;
+
−
    border-radius: 30px;
+
 
}
 
}
  
−
.current {
+
#header #menu #class-a li:hover {
−
    color: #0071ff;
+
  border: #0072fe solid 3px;
 
}
 
}
  
−
.section {
+
#header #menu #class-a .class-a {
−
    margin-top: 30px;
+
  background-color: #0072fe;
 +
  border: #0072fe solid 3px;
 +
  color: #fafafa;
 
}
 
}
  
−
#contain #detail .fundation{
+
#header #menu #class-b {
−
  margin: 5% 0;
+
  right: 33vmin;
 
}
 
}
  
−
#contain #detail figure{
+
#header #menu #class-b li {
−
    margin: 5% 0;
+
  border: #0072fe solid 2px;
−
    border-radius: 12px;
+
  width: 39vmin;
−
    overflow-x: auto;
+
 
}
 
}
  
−
/* 滚动条宽度 */
+
#header #menu #class-b li a {
−
#contain #detail figure::-webkit-scrollbar {
+
  color: #fafafa;
−
    height: 5px;
+
 
}
 
}
  
−
/* 滚动条轨道 */
+
#header #menu #class-b li:active {
−
#contain #detail figure::-webkit-scrollbar-track {
+
  background-color: #0000008f;
−
    background: #FAFAFA;
+
−
    border-radius: 10px;
+
 
}
 
}
−
 
+
#header #menu #class-b .class-b {
−
/* 小滑块 */
+
  background-color: #00000047;
−
#contain #detail figure::-webkit-scrollbar-thumb {
+
−
    background: #c5daee49;
+
−
    border-radius: 10px;
+
−
    width: 5px;
+
 
}
 
}
  
−
#contain #detail figure::-webkit-scrollbar-thumb:hover {
+
#bodyContent a[href ^="https://"], .link-https{
−
    background: #41a0ff;
+
  padding: 0;
 
}
 
}
  
−
#contain #detail table {
+
footer {
−
    margin: 0;
+
  position: -webkit-sticky;
−
    width: 100%;
+
  left: 0;
−
    border: none;
+
  padding-bottom: 0.5vmin;
−
    border-radius: 12px;
+
  width: 100%;
−
    font-family: "CABIN-REGULAR";
+
  background-color: #424242;
−
    font-weight: lighter;
+
−
    -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
+
−
    -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
+
−
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
+
−
    -o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
+
 
}
 
}
  
−
#contain #detail table tr {
+
footer #sponsor {
−
    text-align: center;
+
  position: relative;
 +
  display: flex;
 +
  justify-content: center;
 +
  margin: 0;
 +
  padding: 0.5vmin;
 +
  padding-bottom: 3vmin;
 +
  top: -3vmin;
 +
  width: 100%;
 +
  border-radius: 20px;
 +
  background-color: #ffffff;
 +
  -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
 +
  -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
 +
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
 +
  -o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
 +
  z-index: 1;
 
}
 
}
−
 
+
footer #sponsor img {
−
#contain #detail table thead tr,
+
  width: 96%;
−
#contain #detail table tbody tr {
+
−
    height: 50px;
+
−
    /*background-color: pink;*/
+
 
}
 
}
−
 
+
footer #connect {
−
#contain #detail table tr td {
+
  position: relative;
−
    display:table-cell; vertical-align:middle;
+
  margin: 0;
−
    /*设置table表格每列底部边框*/
+
  padding-top: 1vmin;
−
    padding: 8px;
+
  top: -8vmin;
−
    font-size: medium;
+
  width: 100%;
−
    border-left: none;
+
  background-color: #424242;
−
    border-right: none;
+
  border-radius: 20px;
−
    border-bottom: 1px solid #eaeaea;
+
  z-index: 2;
 
}
 
}
  
−
/*table tr:last-child td:first-child,
+
footer #connect #contact {
−
table tr:last-child td:nth-child(2),
+
  display: flex;
−
table tr:last-child td:nth-child(3),
+
  padding: 0;
−
table tr:last-child td:last-child{/!*设置table表格最后一列底部边框*!/
+
  flex-wrap: wrap;
−
    border-bottom: 2px solid #000;
+
  align-items: center;
−
}*/
+
  justify-content: center;
−
#contain #detail table tr th {
+
−
    display:table-cell; vertical-align:middle;
+
−
    padding: 8px;
+
−
    border: none;
+
−
    background: #0071fe;
+
−
    font-family: "MONTSERRAT-BLACK1";
+
−
    font-size: larger;
+
−
    line-height: 1.5em;
+
−
    color: #FAFAFA;
+
−
 
+
 
}
 
}
  
−
#contain #detail table tr:first-child th:first-child {
+
footer #connect h4 {
−
    border-top-left-radius: 12px;
+
  margin: 1% 0 5vmin;
 +
  text-align: center;
 +
  color: #ffffff;
 +
  font-size: 1.5em;
 +
  font-weight: bold;
 +
  font-family: "MONTSERRAT-BLACK1";
 
}
 
}
  
−
#contain #detail table tr:first-child th:last-child {
+
footer #connect #contact li {
−
    border-top-right-radius: 12px;
+
  width: 280px;
 +
  font-family: "CABIN-REGULAR";
 +
  border: #424242 solid 10px;
 +
  justify-content: center;
 +
  flex-direction: column;
 +
  align-items: center;
 +
  text-align: center;
 
}
 
}
  
−
#contain #detail table tr:last-child td:first-child {
+
footer #connect #contact li:hover {
−
    border-bottom-left-radius: 12px;
+
  border: none;
 
}
 
}
  
−
#contain #detail table tr:last-child td:last-child {
+
footer #connect li img {
−
    border-bottom-right-radius: 12px;
+
  margin-bottom: 2vw;
 +
  width: 20%;
 
}
 
}
−
/* 轮播图 */
+
footer #connect li p {
−
#contain #detail .rotationChart{
+
  color: #ffffff;
−
    margin: 2vw;
+
  font-size: 1.1em;
−
}
+
   text-align: center;
−
 
+
−
#contain #detail .rotationChart img{
+
−
    margin: 0;
+
−
    width: 100%;
+
−
    border-radius: 20px;
+
−
}
+
−
 
+
−
#contain #detail .rotationChart #text{
+
−
    margin: 1vmin 0;
+
−
    position: relative;
+
−
    height: 6vmin;
+
−
    line-height: 6vmin;
+
−
    text-align: center;
+
−
    font-weight: bold;
+
−
    font-size: 1.2em;
+
−
    font-family: "BLACKITALIC";
+
−
}
+
−
 
+
−
#contain #detail .rotationChart button{
+
−
    background-color: #0071fe;
+
−
    width: 6vmin;
+
−
    height: 6vmin;
+
−
    border:none;
+
−
    border-radius: 50%;
+
−
    font-size: 1.5em;
+
−
    font-weight: bold;
+
−
    color: #FAFAFA;
+
−
   
+
−
}
+
−
 
+
−
#contain #detail .rotationChart button:nth-child(1){
+
−
    position: absolute;
+
−
    left: 0;
+
−
}
+
−
 
+
−
#contain #detail .rotationChart button:nth-child(2){
+
−
    position: absolute;
+
−
    right: 0;
+
−
}
+
−
 
+
−
#contain #detail .rotationChart #briefText{
+
−
    width: 100%;
+
−
    padding: 3vmin;
+
−
    background-color: #EFEFEF;    
+
−
    border-radius: 20px;
+
−
}
+
−
 
+
−
/* 文字切换 */
+
−
#contain #detail #TextSwitch{
+
−
    margin: 5% 0;
+
−
    padding: 5%;
+
−
    width: 100%;
+
−
    border-radius: 20px;
+
−
    color: white;
+
−
    background: #0071fe;
+
−
}
+
−
 
+
−
#contain #detail #TextSwitch h5{
+
−
    margin: 2% 0;
+
−
    font-size: 1.2em;
+
−
    font-weight: bold;
+
−
    text-align: center;
+
−
}
+
−
 
+
−
#contain #detail #TextSwitch .switchButton{
+
−
    display: flex;
+
−
    align-items: center;
+
−
    justify-content: center;
+
−
}
+
−
 
+
−
#contain #detail #TextSwitch .switchButton input:nth-child(1){
+
−
    width: 25px;
+
−
    height: 25px;
+
−
}
+
−
 
+
−
#contain #detail #TextSwitch .switchButton input:nth-child(2){
+
−
    height: 25px;
+
−
    width: 25px;
+
−
}
+
−
 
+
−
@media screen and (max-width: 1024px){
+
−
    #contain #detail #downLoad span{
+
−
        font-size: 0.7em;
+
−
    }
+
−
}
+
−
@media screen and (max-width: 850px){
+
−
    #contain #detail #downLoad span{
+
−
        font-size: 0.5em;
+
−
    }
+
−
}
+
−
@media screen and (max-width: 730px) {
+
−
    #contain #detail #downLoad span{
+
−
        font-size: 0.4em;
+
−
    }
+
−
    #contain .left {
+
−
        display: none;
+
−
    }
+
−
 
+
−
    #contain #detail {
+
−
        width: 100%;
+
−
        float: none;
+
−
        padding: 5%;
+
−
        box-sizing: border-box;
+
−
    }
+
−
}
+
−
 
+
−
@media screen and (max-width: 450px){
+
−
    #contain #detail h2{
+
−
        font-size: 1.5em;
+
−
    }
+
−
    #contain #detail h3{
+
−
        font-size: 1.2em;
+
−
    }
+
−
    #contain #detail h4{
+
−
        font-size: 1.1em;
+
−
    }
+
−
    #contain #detail p{
+
−
        font-size: 1em;
+
−
        text-indent:2em;
+
−
    }
+
−
    #contain #detail figure{
+
−
        overflow-x: auto;
+
−
    }
+
 
}
 
}

Revision as of 13:07, 19 October 2021

@font-face { 

 font-family: MONTSERRAT-BLACK1;
 src: url("https://static.igem.org/mediawiki/2021/0/04/T--CPU_CHINA--MONTSERRAT-BLACK1.woff")
   format("woff");

}

@font-face { 

 font-family: MONTSERRAT-BLACKITALIC2;
 src: url("https://static.igem.org/mediawiki/2021/d/d4/T--CPU_CHINA--MONTSERRAT-BLACKITALIC2.woff")
   format("woff");

}

@font-face { 

 font-family: CABIN-REGULAR;
 src: url("https://static.igem.org/mediawiki/2021/b/b3/T--CPU_CHINA--CABIN-REGULAR.woff")
   format("woff");

}

@font-face { 

 font-family: CABIN-ITALIC;
 src: url("https://static.igem.org/mediawiki/2021/7/75/T--CPU_CHINA--CABIN-ITALIC.woff")
   format("woff");

}

@font-face { 

 font-family: BLACKITALIC;
 src: url("https://static.igem.org/mediawiki/2021/6/67/T--CPU_CHINA--BLACKITALIC.woff")
   format("woff");

}

body { 

 background-color: #fafafa;

}

  • {
 box-sizing: border-box;

}

  1. contain {
 margin-top: -12px;
 padding: 0 3% 10%;
 width: 100%;
 background-color: #fafafa;
 z-index: 1;
 text-align: left;
 box-sizing: border-box;

}

.background { 

 position: fixed;
 width: 100%;
 top: 0;
 z-index: -1;
 box-sizing: border-box;

}

  1. header #title {
 position: fixed;
 top: 9vw;
 font-family: "MONTSERRAT-BLACKITALIC2";
 line-height: normal;
 font-weight: bolder;
 font-size: 8vw;
 color: #fafafa;
 z-index: -1;

}

  1. header #load {
 position: fixed;
 display: flex;
 width: 100%;
 height: 100%;
 background-color: white;
 align-items: center;
 justify-content: center;
 z-index: 20;

}

  1. header #load img {
 width: 50vmin;

}

  1. header #menu {
 z-index: 10;

}

  1. header #menu #menuBack {
 position: fixed;
 width: 100%;
 height: 100%;
 box-sizing: border-box;
 z-index: 10;

}

  1. header #menu .menu {
 background-color: #000000ad;
 transition: background-color 2s;

}

  1. header #menu #logo {
 position: fixed;
 top: 3vmin;
 left: 1vmin;
 width: 25vmin;
 z-index: 11;

}

  1. header #menu #menuImg {
 position: fixed;
 top: 2vmin;
 right: 1vmin;
 width: 15vmin;
 z-index: 11;

}

  1. header #menu .class {
 position: fixed;
 top: 14vmin;
 z-index: 11;

}

  1. header #menu .class li {
 padding: 6% 0;
 margin: 2vmin;
 border-radius: 30px;
 text-align: center;
 font-family: "MONTSERRAT-BLACKITALIC2";
 font-size: 1.5em;
 font-weight: bolder;

}

  1. header #menu #class-a {
 right: 1vmin;

}

  1. header #menu #class-a li {
 width: 30vmin;
 background-color: #fafafa;
 border: #fafafa solid 3px;

}

  1. header #menu #class-a li:hover {
 border: #0072fe solid 3px;

}

  1. header #menu #class-a .class-a {
 background-color: #0072fe;
 border: #0072fe solid 3px;
 color: #fafafa;

}

  1. header #menu #class-b {
 right: 33vmin;

}

  1. header #menu #class-b li {
 border: #0072fe solid 2px;
 width: 39vmin;

}

  1. header #menu #class-b li a {
 color: #fafafa;

}

  1. header #menu #class-b li:active {
 background-color: #0000008f;

}

  1. header #menu #class-b .class-b {
 background-color: #00000047;

}

  1. bodyContent a[href ^="https://"], .link-https{
 padding: 0;

}

footer { 

 position: -webkit-sticky;
 left: 0;
 padding-bottom: 0.5vmin;
 width: 100%;
 background-color: #424242;

}

footer #sponsor { 

 position: relative;
 display: flex;
 justify-content: center;
 margin: 0;
 padding: 0.5vmin;
 padding-bottom: 3vmin;
 top: -3vmin;
 width: 100%;
 border-radius: 20px;
 background-color: #ffffff;
 -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
 -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
 box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
 -o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
 z-index: 1;

} footer #sponsor img { 

 width: 96%;

} footer #connect { 

 position: relative;
 margin: 0;
 padding-top: 1vmin;
 top: -8vmin;
 width: 100%;
 background-color: #424242;
 border-radius: 20px;
 z-index: 2;

}

footer #connect #contact { 

 display: flex;
 padding: 0;
 flex-wrap: wrap;
 align-items: center;
 justify-content: center;

}

footer #connect h4 { 

 margin: 1% 0 5vmin;
 text-align: center;
 color: #ffffff;
 font-size: 1.5em;
 font-weight: bold;
 font-family: "MONTSERRAT-BLACK1";

}

footer #connect #contact li { 

 width: 280px;
 font-family: "CABIN-REGULAR";
 border: #424242 solid 10px;
 justify-content: center;
 flex-direction: column;
 align-items: center;
 text-align: center;

}

footer #connect #contact li:hover { 

 border: none;

}

footer #connect li img { 

 margin-bottom: 2vw;
 width: 20%;

} footer #connect li p { 

 color: #ffffff;
 font-size: 1.1em;
 text-align: center;

}