m |
|||
(14 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
/* Fix for random black bar at top :D*/ | /* Fix for random black bar at top :D*/ | ||
− | #content .mw-content-ltr > p { | + | |
+ | #content .mw-content-ltr>p { | ||
margin: 0; | margin: 0; | ||
− | |||
− | |||
− | |||
− | |||
} | } | ||
Line 13: | Line 10: | ||
right: 20px; | right: 20px; | ||
width: 10vw; | width: 10vw; | ||
− | filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ | + | filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); |
− | filter: gray; /* IE6-9 */ | + | /* Firefox 3.5+ */ |
− | -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ | + | filter: gray; |
+ | /* IE6-9 */ | ||
+ | -webkit-filter: grayscale(100%); | ||
+ | /* Chrome 19+ & Safari 6+ */ | ||
opacity: 0.5; | opacity: 0.5; | ||
} | } | ||
Line 39: | Line 39: | ||
} | } | ||
− | #content . | + | #content .people a { |
+ | color: inherit; | ||
} | } | ||
+ | |||
+ | #content .people a:hover { | ||
+ | color: inherit; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | #content .notebook {} | ||
#content .notebook img { | #content .notebook img { | ||
Line 60: | Line 68: | ||
text-align: center; | text-align: center; | ||
} | } | ||
− | |||
#content .banner { | #content .banner { | ||
color: #ffffff; | color: #ffffff; | ||
− | text-shadow: 2px 2px | + | text-shadow: 2px 2px #9e9e9e; |
position: relative; | position: relative; | ||
overflow-x: hidden; | overflow-x: hidden; | ||
Line 70: | Line 77: | ||
min-height: 100vh; | min-height: 100vh; | ||
width: 100%; | width: 100%; | ||
− | background: | + | background: #69C5D6; |
− | background: -webkit-linear-gradient(#69C5D6 | + | /* For browsers that do not support gradients */ |
− | background: -o-linear-gradient(#69C5D6 | + | background: -webkit-linear-gradient(#69C5D6 80%, #ffffff); |
− | background: -moz-linear-gradient(#69C5D6 | + | /* For Safari 5.1 to 6.0 */ |
− | background: linear-gradient(#69C5D6 | + | background: -o-linear-gradient(#69C5D6 80%, #ffffff); |
+ | /* For Opera 11.1 to 12.0 */ | ||
+ | background: -moz-linear-gradient(#69C5D6 80%, #ffffff); | ||
+ | /* For Firefox 3.6 to 15 */ | ||
+ | background: linear-gradient(#69C5D6 80%, #ffffff); | ||
+ | /* Standard syntax */ | ||
} | } | ||
Line 83: | Line 95: | ||
} | } | ||
− | #content .banner-img > img { | + | #content .banner-img>img { |
max-height: 80vh; | max-height: 80vh; | ||
max-width: 80vw; | max-width: 80vw; | ||
Line 96: | Line 108: | ||
overflow: hidden; | overflow: hidden; | ||
min-height: 20vh; | min-height: 20vh; | ||
+ | } | ||
+ | |||
+ | #content .centreimage { | ||
+ | vertical-align: middle; | ||
+ | display: block; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | } | ||
+ | |||
+ | #content .centrevid { | ||
+ | display: block; | ||
+ | margin: 0 auto; | ||
+ | width: 840; | ||
} | } | ||
Line 105: | Line 130: | ||
} | } | ||
− | #content .banner-text-sm > h1 { | + | #content .banner-text-sm>h1 { |
font-size: 5rem; | font-size: 5rem; | ||
} | } | ||
− | #content .banner-text-sm > p { | + | #content .banner-text-sm>p { |
text-align: center; | text-align: center; | ||
font-size: 2rem; | font-size: 2rem; | ||
font-weight: 300; | font-weight: 300; | ||
+ | } | ||
+ | |||
+ | #content .background { | ||
+ | margin: 40px 0px 40px 0px; | ||
+ | } | ||
+ | |||
+ | #content .background h2 { | ||
+ | text-align: center; | ||
+ | padding: 0px 15px 15px 15px; | ||
+ | } | ||
+ | |||
+ | #content .background p { | ||
+ | font-size: 1.25rem; | ||
+ | font-weight: 300; | ||
+ | } | ||
+ | |||
+ | #content .background {} | ||
+ | |||
+ | #content .background img { | ||
+ | width: 100%; | ||
+ | padding: 20px 0px 20px 0px; | ||
+ | } | ||
+ | |||
+ | #content .medal-img { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | #content .medal-title { | ||
+ | font-size: 5rem; | ||
+ | font-weight: 300; | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | |||
+ | #content .medal-link { | ||
+ | transition: all .2s ease-in-out; | ||
+ | } | ||
+ | |||
+ | #content .medal-link:hover { | ||
+ | transform: scale(1.1); | ||
+ | } | ||
+ | |||
+ | #content .medal-link>a { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | #content .medals { | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #content .medal-bronze { | ||
+ | text-align: center; | ||
+ | font-size: 2.5rem; | ||
+ | font-weight: 300; | ||
+ | color: #fff; | ||
+ | background-color: #cd7f32; | ||
+ | border-radius: 20px; | ||
+ | padding: 10px; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | #content .medal-silver { | ||
+ | text-align: center; | ||
+ | font-size: 2.5rem; | ||
+ | font-weight: 300; | ||
+ | color: #fff; | ||
+ | background-color: #c0c0c0; | ||
+ | border-radius: 20px; | ||
+ | padding: 10px; | ||
+ | } | ||
+ | |||
+ | #content .medal-gold { | ||
+ | text-align: center; | ||
+ | font-size: 2.5rem; | ||
+ | font-weight: 300; | ||
+ | color: #fff; | ||
+ | background-color: #daa520; | ||
+ | border-radius: 20px; | ||
+ | padding: 10px; | ||
+ | } | ||
+ | |||
+ | #content .model-button { | ||
+ | text-align: center; | ||
+ | font-size: 2.5rem; | ||
+ | font-weight: 300; | ||
+ | color: #fff; | ||
+ | background-color: #69c5d6; | ||
+ | border-radius: 20px; | ||
+ | padding: 10px; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | #content .design-button { | ||
+ | text-align: center; | ||
+ | font-size: 2rem; | ||
+ | font-weight: 300; | ||
+ | color: #fff; | ||
+ | background-color: #69c5d6; | ||
+ | border-radius: 20px; | ||
+ | padding: 10px; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | #content .engagement-button { | ||
+ | text-align: center; | ||
+ | font-size: 1.5rem; | ||
+ | font-weight: 300; | ||
+ | color: #fff; | ||
+ | background-color: #69c5d6; | ||
+ | border-radius: 20px; | ||
+ | padding: 10px; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | #content .award { | ||
+ | text-align: center; | ||
+ | font-size: 2.5rem; | ||
+ | font-weight: 300; | ||
+ | color: #fff; | ||
+ | background-color: #69c5d6; | ||
+ | border-radius: 20px; | ||
+ | padding: 10px; | ||
+ | } | ||
+ | |||
+ | #content .parts { | ||
+ | margin-top: 50px; | ||
+ | margin-bottom: 50px; | ||
+ | } | ||
+ | |||
+ | #content .parts h3 { | ||
+ | text-align: center; | ||
+ | font-size: 1.25rem; | ||
+ | font-weight: 400; | ||
+ | } | ||
+ | |||
+ | #content .parts p { | ||
+ | font-size: 1.25rem; | ||
+ | font-weight: 300; | ||
+ | } | ||
+ | |||
+ | #content .parts img { | ||
+ | width: 100%; | ||
+ | padding: 20px 0px 20px 0px; | ||
+ | } | ||
+ | |||
+ | #content .protocol {} | ||
+ | |||
+ | #content .protocol img { | ||
+ | height: 20vh; | ||
+ | padding: 20px; | ||
+ | } | ||
+ | |||
+ | #content .protocol h2 { | ||
+ | font-size: 2rem; | ||
+ | font-weight: 300; | ||
+ | } | ||
+ | |||
+ | #content .protocol li { | ||
+ | border: none; | ||
+ | font-size: 1.3rem; | ||
+ | font-weight: 300; | ||
+ | } | ||
+ | |||
+ | #content .btn-protocol { | ||
+ | font-size: 2rem; | ||
+ | font-weight: 300; | ||
+ | } | ||
+ | |||
+ | #content .pod img { | ||
+ | width: 100%; | ||
+ | padding-top: 20px; | ||
+ | } | ||
+ | |||
+ | .rotate90 { | ||
+ | -webkit-transform: rotate(90deg); | ||
+ | -moz-transform: rotate(90deg); | ||
+ | -o-transform: rotate(90deg); | ||
+ | -ms-transform: rotate(90deg); | ||
+ | transform: rotate(90deg); | ||
} | } | ||
Line 144: | Line 347: | ||
#content .footer a:hover { | #content .footer a:hover { | ||
color: inherit; | color: inherit; | ||
+ | text-decoration: none; | ||
} | } | ||
Line 174: | Line 378: | ||
#content .sponsor { | #content .sponsor { | ||
text-align: center; | text-align: center; | ||
− | |||
− | |||
− | |||
} | } | ||
− | #content .sponsor | + | #content .sponsor h2 { |
− | text-align: | + | text-align: left; |
− | + | ||
} | } | ||
Line 187: | Line 387: | ||
margin: 20px; | margin: 20px; | ||
width: 150px; | width: 150px; | ||
+ | filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); | ||
+ | /* Firefox 3.5+ */ | ||
+ | filter: gray; | ||
+ | /* IE6-9 */ | ||
+ | -webkit-filter: grayscale(100%); | ||
+ | /* Chrome 19+ & Safari 6+ */ | ||
} | } | ||
− | #content .sponsor:hover { | + | #content .sponsor img:hover { |
filter: none; | filter: none; | ||
-webkit-filter: grayscale(0%); | -webkit-filter: grayscale(0%); | ||
+ | } | ||
+ | |||
+ | #content .sponsor a { | ||
+ | color: inherit; | ||
+ | } | ||
+ | |||
+ | #content .sponsor a:hover { | ||
+ | color: inherit; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | #content .table-bristol>thead>tr>th { | ||
+ | background-color: #69c5d6; | ||
+ | } | ||
+ | |||
+ | #content .navibtn { | ||
+ | text-align: center; | ||
+ | background-color: #69c5d6; | ||
+ | border-radius: 10px; | ||
+ | padding: 10px; | ||
+ | margin: 20px; | ||
+ | } | ||
+ | |||
+ | #content .navibtn p { | ||
+ | font-size: 1.5rem; | ||
+ | font-weight: 500; | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | #content .requirement { | ||
+ | text-align: center; | ||
+ | font-size: 1.5rem; | ||
+ | font-weight: 500; | ||
+ | color: #fff; | ||
+ | background-color: #69c5d6; | ||
+ | border-radius: 20px; | ||
+ | padding: 10px; | ||
+ | } | ||
+ | |||
+ | #content .solution { | ||
+ | text-align: center; | ||
+ | font-size: 1.5rem; | ||
+ | font-weight: 500; | ||
+ | color: #fff; | ||
+ | background-color: #51c05e; | ||
+ | border-radius: 20px; | ||
+ | padding: 10px; | ||
} | } | ||
Line 197: | Line 450: | ||
position: relative; | position: relative; | ||
overflow-x: hidden; | overflow-x: hidden; | ||
− | min-height: | + | min-height: 400px; |
} | } | ||
Line 207: | Line 460: | ||
height: 200px; | height: 200px; | ||
transform: translate(-50%, -50%); | transform: translate(-50%, -50%); | ||
− | background-color: # | + | /*background-color: #bbb;*/ |
border-radius: 5px; | border-radius: 5px; | ||
} | } | ||
− | #content .reactor div{ | + | #content .reactor img { |
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | left: 50%; | ||
+ | width: auto; | ||
+ | height: 400px; | ||
+ | transform: translate(-50%, -50%); | ||
+ | } | ||
+ | |||
+ | #content .reactor div { | ||
margin-top: 50%; | margin-top: 50%; | ||
transform: translateY(-50%); | transform: translateY(-50%); | ||
Line 224: | Line 486: | ||
height: 70px; | height: 70px; | ||
border-radius: 70px; | border-radius: 70px; | ||
− | top: | + | top: 40%; |
transform: translate(50%, -50%); | transform: translate(50%, -50%); | ||
− | |||
animation: reactant-animate 3s linear infinite; | animation: reactant-animate 3s linear infinite; | ||
} | } | ||
Line 234: | Line 495: | ||
top: 15%; | top: 15%; | ||
text-align: center; | text-align: center; | ||
− | font-size: | + | font-size: 1.9rem; |
+ | font-weight: 500; | ||
color: #ffffff; | color: #ffffff; | ||
transform: translate(-50%); | transform: translate(-50%); | ||
Line 242: | Line 504: | ||
#content .reactant:nth-child(2) { | #content .reactant:nth-child(2) { | ||
− | top: | + | top: 30%; |
animation: reactant-animate -3s 5s linear infinite; | animation: reactant-animate -3s 5s linear infinite; | ||
} | } | ||
#content .reactant:nth-child(3) { | #content .reactant:nth-child(3) { | ||
− | top: | + | top: 50%; |
animation: reactant-animate -2s 4s linear infinite; | animation: reactant-animate -2s 4s linear infinite; | ||
} | } | ||
#content .reactant:nth-child(4) { | #content .reactant:nth-child(4) { | ||
− | top: | + | top: 60%; |
animation: reactant-animate -1s 6s linear infinite; | animation: reactant-animate -1s 6s linear infinite; | ||
} | } | ||
Line 274: | Line 536: | ||
opacity: 0; | opacity: 0; | ||
} | } | ||
− | |||
10% { | 10% { | ||
right: 90%; | right: 90%; | ||
opacity: 1; | opacity: 1; | ||
} | } | ||
− | |||
49% { | 49% { | ||
background-color: #0000bb; | background-color: #0000bb; | ||
Line 285: | Line 545: | ||
opacity: 1; | opacity: 1; | ||
} | } | ||
− | |||
51% { | 51% { | ||
background-color: #00bb00; | background-color: #00bb00; | ||
Line 291: | Line 550: | ||
opacity: 1; | opacity: 1; | ||
} | } | ||
− | |||
90% { | 90% { | ||
right: 10%; | right: 10%; | ||
opacity: 1; | opacity: 1; | ||
} | } | ||
− | |||
100% { | 100% { | ||
background-color: #00bb00; | background-color: #00bb00; | ||
Line 305: | Line 562: | ||
@keyframes reactant-after-animate { | @keyframes reactant-after-animate { | ||
− | 0%{ | + | 0% { |
content: "NOx"; | content: "NOx"; | ||
} | } | ||
− | 49%{ | + | 49% { |
content: "NOx"; | content: "NOx"; | ||
} | } | ||
Line 320: | Line 577: | ||
#content .x1 { | #content .x1 { | ||
− | + | -webkit-animation: animateCloud -9s 20s linear infinite; | |
− | + | -moz-animation: animateCloud -9s 20s linear infinite; | |
− | + | -o-animation: animateCloud -9s 20s linear infinite; | |
− | + | animation: animateCloud -9s 20s linear infinite; | |
− | + | -webkit-transform: scale(0.3); | |
− | + | -moz-transform: scale(0.3); | |
− | + | transform: scale(0.3); | |
position: absolute; | position: absolute; | ||
top: 5%; | top: 5%; | ||
Line 333: | Line 590: | ||
#content .x2 { | #content .x2 { | ||
− | + | -webkit-animation: animateCloud -15s 35s linear infinite; | |
− | + | -moz-animation: animateCloud -15s 35s linear infinite; | |
− | + | -o-animation: animateCloud -15s 35s linear infinite; | |
− | + | animation: animateCloud -15s 35s linear infinite; | |
− | + | -webkit-transform: scale(0.65); | |
− | + | -moz-transform: scale(0.65); | |
− | + | transform: scale(0.65); | |
position: absolute; | position: absolute; | ||
top: 20%; | top: 20%; | ||
Line 346: | Line 603: | ||
#content .x3 { | #content .x3 { | ||
− | + | -webkit-animation: animateCloud -25s 30s linear infinite; | |
− | + | -moz-animation: animateCloud -25s 30s linear infinite; | |
− | + | -o-animation: animateCloud -25s 30s linear infinite; | |
− | + | animation: animateCloud -25s 30s linear infinite; | |
− | + | -webkit-transform: scale(0.5); | |
− | + | -moz-transform: scale(0.5); | |
− | + | transform: scale(0.5); | |
position: absolute; | position: absolute; | ||
top: 35%; | top: 35%; | ||
Line 359: | Line 616: | ||
#content .x4 { | #content .x4 { | ||
− | + | -webkit-animation: animateCloud -5s 18s linear infinite; | |
− | + | -moz-animation: animateCloud -5s 18s linear infinite; | |
− | + | -o-animation: animateCloud -5s 18s linear infinite; | |
− | + | animation: animateCloud -5s 18s linear infinite; | |
− | + | -webkit-transform: scale(0.4); | |
− | + | -moz-transform: scale(0.4); | |
− | + | transform: scale(0.4); | |
position: absolute; | position: absolute; | ||
top: 45%; | top: 45%; | ||
Line 372: | Line 629: | ||
#content .x5 { | #content .x5 { | ||
− | + | -webkit-animation: animateCloud -18s 25s linear infinite; | |
− | + | -moz-animation: animateCloud -18s 25s linear infinite; | |
− | + | -o-animation: animateCloud -18s 25s linear infinite; | |
− | + | animation: animateCloud -18s 25s linear infinite; | |
− | + | -webkit-transform: scale(0.55); | |
− | + | -moz-transform: scale(0.55); | |
− | + | transform: scale(0.55); | |
position: absolute; | position: absolute; | ||
top: 60%; | top: 60%; | ||
Line 385: | Line 642: | ||
#content .cloud { | #content .cloud { | ||
− | + | background: #fff; | |
− | + | background: -moz-linear-gradient(top, #fff 5%, #f1f1f1 100%); | |
− | + | background: -webkit-linear-gradient(top, #fff 5%, #f1f1f1 100%); | |
− | + | background: -o-linear-gradient(top, #fff 5%, #f1f1f1 100%); | |
− | + | background: -ms-linear-gradient(top, #fff 5%, #f1f1f1 100%); | |
− | + | background: linear-gradient(top, #fff 5%, #f1f1f1 100%); | |
− | + | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1', GradientType=0); | |
− | + | -webkit-border-radius: 100px; | |
− | + | -moz-border-radius: 100px; | |
− | + | border-radius: 100px; | |
− | + | -webkit-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1); | |
− | + | -moz-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1); | |
− | + | box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1); | |
− | + | height: 120px; | |
− | + | position: relative; | |
− | + | width: 350px; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
Line 410: | Line 664: | ||
content: ''; | content: ''; | ||
position: absolute; | position: absolute; | ||
− | + | z-indeX: -1; | |
} | } | ||
#content .cloud:after { | #content .cloud:after { | ||
− | + | -webkit-border-radius: 100px; | |
− | + | -moz-border-radius: 100px; | |
− | + | border-radius: 100px; | |
− | + | height: 100px; | |
− | + | left: 50px; | |
− | + | top: -50px; | |
− | + | width: 100px; | |
− | + | ||
} | } | ||
#content .cloud:before { | #content .cloud:before { | ||
− | + | -webkit-border-radius: 200px; | |
− | + | -moz-border-radius: 200px; | |
− | + | border-radius: 200px; | |
− | + | width: 180px; | |
− | + | height: 180px; | |
− | + | right: 50px; | |
− | + | top: -90px; | |
− | + | ||
} | } | ||
Line 444: | Line 696: | ||
} | } | ||
− | #content .fadeIn { | + | #content .fadeIn {} |
− | } | + | |
#content .fadeIn.Up, .fadeIn .Up { | #content .fadeIn.Up, .fadeIn .Up { | ||
Line 511: | Line 762: | ||
transform: scale(1); | transform: scale(1); | ||
} | } | ||
+ | } | ||
+ | |||
+ | /* Over ride carousel */ | ||
+ | |||
+ | #content .img-fluid { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | border-radius: 20px; | ||
+ | } | ||
+ | |||
+ | #content .img-fluid-edit { | ||
+ | width: 80%; | ||
+ | height: 80%; | ||
+ | border-radius: 20px; | ||
+ | display: block; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | } | ||
+ | |||
+ | #content .img-fluid-small { | ||
+ | width: 50%; | ||
+ | height: 50%; | ||
+ | border-radius: 20px; | ||
+ | display: block; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | } | ||
+ | |||
+ | #content .img-fluid-portrait { | ||
+ | width: 30%; | ||
+ | height: 30%; | ||
+ | border-radius: 20px; | ||
+ | display: block; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | } | ||
+ | |||
+ | #content .carousel-control-next-icon { | ||
+ | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2aaa0000' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"); | ||
+ | } | ||
+ | |||
+ | #content .carousel-control-prev-icon { | ||
+ | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2aaa0000' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"); | ||
+ | -webkit-transform: rotate(180deg); | ||
+ | -moz-transform: rotate(180deg); | ||
+ | -ms-transform: rotate(180deg); | ||
+ | -o-transform: rotate(180deg); | ||
+ | transform: rotate(180deg); | ||
} | } | ||
Line 517: | Line 816: | ||
#content .featurette-divider { | #content .featurette-divider { | ||
− | margin: 5rem 0; /* Space out the Bootstrap <hr> more */ | + | margin: 5rem 0; |
+ | /* Space out the Bootstrap <hr> more */ | ||
} | } | ||
/* Thin out the marketing headings */ | /* Thin out the marketing headings */ | ||
+ | |||
#content .featurette-heading { | #content .featurette-heading { | ||
font-weight: 300; | font-weight: 300; | ||
+ | line-height: 1; | ||
+ | letter-spacing: -.05rem; | ||
+ | } | ||
+ | |||
+ | #content .featurette-subheading { | ||
+ | font-weight: 300; | ||
+ | font-size: 2.5rem; | ||
line-height: 1; | line-height: 1; | ||
letter-spacing: -.05rem; | letter-spacing: -.05rem; | ||
Line 534: | Line 842: | ||
/* Remove bootstrap dropdown caret */ | /* Remove bootstrap dropdown caret */ | ||
+ | |||
#content .dropdown-toggle::after { | #content .dropdown-toggle::after { | ||
− | + | display: none | |
} | } | ||
/* Bootstrap dropdown on hover*/ | /* Bootstrap dropdown on hover*/ | ||
+ | |||
@media (min-width: 992px) { | @media (min-width: 992px) { | ||
#content .dropdown:hover .dropdown-menu { | #content .dropdown:hover .dropdown-menu { | ||
Line 551: | Line 861: | ||
@media (min-width: 40em) { | @media (min-width: 40em) { | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
#content .featurette-heading { | #content .featurette-heading { | ||
− | font-size: | + | font-size: 3.5rem; |
} | } | ||
} | } | ||
+ | /* | ||
@media (min-width: 62em) { | @media (min-width: 62em) { | ||
#content .featurette-heading { | #content .featurette-heading { | ||
margin-top: 7rem; | margin-top: 7rem; | ||
} | } | ||
− | } | + | }*/ |
Latest revision as of 16:53, 14 December 2017
/* Fix for random black bar at top :D*/
- content .mw-content-ltr>p {
margin: 0;
}
- content .igem-logo {
position: absolute; top: 20px; right: 20px; width: 10vw; filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ opacity: 0.5;
}
- content .igem-logo img {
max-width: 100%;
}
- content .team {
text-align: center; width: 100%;
}
- content .smallheadshot {
text-align: center; height: 20vh; margin-top: 20px; border-radius: 100%;
}
- content .people {
overflow: hidden;
}
- content .people a {
color: inherit;
}
- content .people a:hover {
color: inherit; text-decoration: none;
}
- content .notebook {}
- content .notebook img {
height: 20vh; padding: 20px;
}
- content .notebook h2 {
font-size: 3rem;
}
- content .notebook li {
border: none; font-size: 1.3rem; font-weight: 300;
}
- content .notebookicon {
text-align: center;
}
- content .banner {
color: #ffffff; text-shadow: 2px 2px #9e9e9e; position: relative; overflow-x: hidden; text-align: center; min-height: 100vh; width: 100%; background: #69C5D6; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(#69C5D6 80%, #ffffff); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(#69C5D6 80%, #ffffff); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(#69C5D6 80%, #ffffff); /* For Firefox 3.6 to 15 */ background: linear-gradient(#69C5D6 80%, #ffffff); /* Standard syntax */
}
- content .banner-img {
position: relative; /*margin-top: 30vh; transform: translateY(-30%);*/
}
- content .banner-img>img {
max-height: 80vh; max-width: 80vw; height: auto;
}
- content .banner-sm {
width: 100%; position: relative; left: 50%; transform: translateX(-50%); overflow: hidden; min-height: 20vh;
}
- content .centreimage {
vertical-align: middle; display: block; margin-left: auto; margin-right: auto;
}
- content .centrevid {
display: block; margin: 0 auto; width: 840;
}
- content .banner-text-sm {
text-align: center; position: relative; margin-top: 10vh; transform: translateY(-10%);
}
- content .banner-text-sm>h1 {
font-size: 5rem;
}
- content .banner-text-sm>p {
text-align: center; font-size: 2rem; font-weight: 300;
}
- content .background {
margin: 40px 0px 40px 0px;
}
- content .background h2 {
text-align: center; padding: 0px 15px 15px 15px;
}
- content .background p {
font-size: 1.25rem; font-weight: 300;
}
- content .background {}
- content .background img {
width: 100%; padding: 20px 0px 20px 0px;
}
- content .medal-img {
width: 100%;
}
- content .medal-title {
font-size: 5rem; font-weight: 300; margin-bottom: 20px;
}
- content .medal-link {
transition: all .2s ease-in-out;
}
- content .medal-link:hover {
transform: scale(1.1);
}
- content .medal-link>a {
text-decoration: none;
}
- content .medals {
text-align: center;
}
- content .medal-bronze {
text-align: center; font-size: 2.5rem; font-weight: 300; color: #fff; background-color: #cd7f32; border-radius: 20px; padding: 10px; width: 100%;
}
- content .medal-silver {
text-align: center; font-size: 2.5rem; font-weight: 300; color: #fff; background-color: #c0c0c0; border-radius: 20px; padding: 10px;
}
- content .medal-gold {
text-align: center; font-size: 2.5rem; font-weight: 300; color: #fff; background-color: #daa520; border-radius: 20px; padding: 10px;
}
- content .model-button {
text-align: center; font-size: 2.5rem; font-weight: 300; color: #fff; background-color: #69c5d6; border-radius: 20px; padding: 10px; width: 100%;
}
- content .design-button {
text-align: center; font-size: 2rem; font-weight: 300; color: #fff; background-color: #69c5d6; border-radius: 20px; padding: 10px; width: 100%;
}
- content .engagement-button {
text-align: center; font-size: 1.5rem; font-weight: 300; color: #fff; background-color: #69c5d6; border-radius: 20px; padding: 10px; width: 100%;
}
- content .award {
text-align: center; font-size: 2.5rem; font-weight: 300; color: #fff; background-color: #69c5d6; border-radius: 20px; padding: 10px;
}
- content .parts {
margin-top: 50px; margin-bottom: 50px;
}
- content .parts h3 {
text-align: center; font-size: 1.25rem; font-weight: 400;
}
- content .parts p {
font-size: 1.25rem; font-weight: 300;
}
- content .parts img {
width: 100%; padding: 20px 0px 20px 0px;
}
- content .protocol {}
- content .protocol img {
height: 20vh; padding: 20px;
}
- content .protocol h2 {
font-size: 2rem; font-weight: 300;
}
- content .protocol li {
border: none; font-size: 1.3rem; font-weight: 300;
}
- content .btn-protocol {
font-size: 2rem; font-weight: 300;
}
- content .pod img {
width: 100%; padding-top: 20px;
}
.rotate90 {
-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg);
}
- content .footer {
background: #F7F7F7; margin-top: 50px; padding-left: 50px; padding-right: 50px; padding-top: 20px;
}
- content .footer h4 {
text-align: center; font-weight: 400;
}
- content .footer h5 {
text-align: center; font-weight: 400;
}
- content .footer h6 {
text-align: center; font-weight: 300;
}
- content .footer a {
color: inherit;
}
- content .footer a:hover {
color: inherit; text-decoration: none;
}
- content footer p {
text-align: center; margin: 0 !important; padding-bottom: 16px;
}
- content .footer-social {
width: 100%; text-align: center;
}
- content .footer-social img {
width: 80px; padding: 20px; text-shadow:
}
- content .footer-team {
text-align: center;
}
- content .footer-team img {
height: 150px; width: 150px;
}
- content .sponsor {
text-align: center;
}
- content .sponsor h2 {
text-align: left;
}
- content .sponsor img {
margin: 20px; width: 150px; filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}
- content .sponsor img:hover {
filter: none; -webkit-filter: grayscale(0%);
}
- content .sponsor a {
color: inherit;
}
- content .sponsor a:hover {
color: inherit; text-decoration: none;
}
- content .table-bristol>thead>tr>th {
background-color: #69c5d6;
}
- content .navibtn {
text-align: center; background-color: #69c5d6; border-radius: 10px; padding: 10px; margin: 20px;
}
- content .navibtn p {
font-size: 1.5rem; font-weight: 500; color: #fff;
}
- content .requirement {
text-align: center; font-size: 1.5rem; font-weight: 500; color: #fff; background-color: #69c5d6; border-radius: 20px; padding: 10px;
}
- content .solution {
text-align: center; font-size: 1.5rem; font-weight: 500; color: #fff; background-color: #51c05e; border-radius: 20px; padding: 10px;
}
- content .reactor-animation {
position: relative; overflow-x: hidden; min-height: 400px;
}
- content .reactor {
position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; transform: translate(-50%, -50%); /*background-color: #bbb;*/ border-radius: 5px;
}
- content .reactor img {
position: absolute; top: 50%; left: 50%; width: auto; height: 400px; transform: translate(-50%, -50%);
}
- content .reactor div {
margin-top: 50%; transform: translateY(-50%); text-align: center; font-size: 4rem; color: #ffffff
}
- content .reactant {
position: absolute; width: 70px; height: 70px; border-radius: 70px; top: 40%; transform: translate(50%, -50%); animation: reactant-animate 3s linear infinite;
}
- content .reactant::after {
position: relative; top: 15%; text-align: center; font-size: 1.9rem; font-weight: 500; color: #ffffff; transform: translate(-50%); animation: reactant-after-animate 3s linear infinite; content: "";
}
- content .reactant:nth-child(2) {
top: 30%; animation: reactant-animate -3s 5s linear infinite;
}
- content .reactant:nth-child(3) {
top: 50%; animation: reactant-animate -2s 4s linear infinite;
}
- content .reactant:nth-child(4) {
top: 60%; animation: reactant-animate -1s 6s linear infinite;
}
- content .reactant:nth-child(2)::after {
animation: reactant-after-animate -3s 5s linear infinite;
}
- content .reactant:nth-child(3)::after {
animation: reactant-after-animate -2s 4s linear infinite;
}
- content .reactant:nth-child(4)::after {
animation: reactant-after-animate -1s 6s linear infinite;
}
@keyframes reactant-animate {
0% { background-color: #0000bb; right: 100%; opacity: 0; } 10% { right: 90%; opacity: 1; } 49% { background-color: #0000bb; right: 50%; opacity: 1; } 51% { background-color: #00bb00; right: 50%; opacity: 1; } 90% { right: 10%; opacity: 1; } 100% { background-color: #00bb00; right: 0%; opacity: 0; }
}
@keyframes reactant-after-animate {
0% { content: "NOx"; } 49% { content: "NOx"; } 50% { content: "NH4"; } 100% { content: "NH4"; }
}
- content .x1 {
-webkit-animation: animateCloud -9s 20s linear infinite; -moz-animation: animateCloud -9s 20s linear infinite; -o-animation: animateCloud -9s 20s linear infinite; animation: animateCloud -9s 20s linear infinite; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); transform: scale(0.3); position: absolute; top: 5%; z-index: 2;
}
- content .x2 {
-webkit-animation: animateCloud -15s 35s linear infinite; -moz-animation: animateCloud -15s 35s linear infinite; -o-animation: animateCloud -15s 35s linear infinite; animation: animateCloud -15s 35s linear infinite; -webkit-transform: scale(0.65); -moz-transform: scale(0.65); transform: scale(0.65); position: absolute; top: 20%; z-index: 2;
}
- content .x3 {
-webkit-animation: animateCloud -25s 30s linear infinite; -moz-animation: animateCloud -25s 30s linear infinite; -o-animation: animateCloud -25s 30s linear infinite; animation: animateCloud -25s 30s linear infinite; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); transform: scale(0.5); position: absolute; top: 35%; z-index: 2;
}
- content .x4 {
-webkit-animation: animateCloud -5s 18s linear infinite; -moz-animation: animateCloud -5s 18s linear infinite; -o-animation: animateCloud -5s 18s linear infinite; animation: animateCloud -5s 18s linear infinite; -webkit-transform: scale(0.4); -moz-transform: scale(0.4); transform: scale(0.4); position: absolute; top: 45%; z-index: 2;
}
- content .x5 {
-webkit-animation: animateCloud -18s 25s linear infinite; -moz-animation: animateCloud -18s 25s linear infinite; -o-animation: animateCloud -18s 25s linear infinite; animation: animateCloud -18s 25s linear infinite; -webkit-transform: scale(0.55); -moz-transform: scale(0.55); transform: scale(0.55); position: absolute; top: 60%; z-index: 2;
}
- content .cloud {
background: #fff; background: -moz-linear-gradient(top, #fff 5%, #f1f1f1 100%); background: -webkit-linear-gradient(top, #fff 5%, #f1f1f1 100%); background: -o-linear-gradient(top, #fff 5%, #f1f1f1 100%); background: -ms-linear-gradient(top, #fff 5%, #f1f1f1 100%); background: linear-gradient(top, #fff 5%, #f1f1f1 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1', GradientType=0); -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1); height: 120px; position: relative; width: 350px;
}
- content .cloud:after, .cloud:before {
background: #fff; content: ; position: absolute; z-indeX: -1;
}
- content .cloud:after {
-webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; height: 100px; left: 50px; top: -50px; width: 100px;
}
- content .cloud:before {
-webkit-border-radius: 200px; -moz-border-radius: 200px; border-radius: 200px; width: 180px; height: 180px; right: 50px; top: -90px;
}
@keyframes animateCloud {
0% { left: -1000px; } 100% { left: 100%; }
}
- content .fadeIn {}
- content .fadeIn.Up, .fadeIn .Up {
opacity: 0; transition: all 500ms ease-in; transform: translateY(5vh);
}
- content .fadedIn.Up, .fadedIn .Up {
opacity: 1; transform: translateY(0);
}
- content .fadeIn.Down, .fadeIn .Down {
opacity: 0; transition: all 500ms ease-in; transform: translateY(-5vh);
}
- content .fadedIn.Down, .fadedIn .Down {
opacity: 1; transform: translateY(0);
}
- content .fadeIn.Left, .fadeIn .Left {
opacity: 0; transition: all 500ms ease-in; transform: translateX(-10vw);
}
- content .fadedIn.Left, .fadedIn .Left {
opacity: 1; transform: translateX(0);
}
- content .fadeIn.Right, .fadeIn .Right {
opacity: 0; transition: all 500ms ease-in; transform: translateX(10vw);
}
- content .fadedIn.Right, .fadedIn .Right {
opacity: 1; transform: translateX(0);
}
- content .fadeIn.Pop, .fadeIn .Pop {
opacity: 0; transition: all 700ms ease-in;
}
- content .fadedIn.Pop, .fadedIn .Pop {
opacity: 1; animation: fadeInPop 700ms linear;
}
@keyframes fadeInPop {
0% { transform: scale(0); } 80% { transform: scale(1.1); } 100% { transform: scale(1); }
}
/* Over ride carousel */
- content .img-fluid {
width: 100%; height: 100%; border-radius: 20px;
}
- content .img-fluid-edit {
width: 80%; height: 80%; border-radius: 20px; display: block; margin-left: auto; margin-right: auto;
}
- content .img-fluid-small {
width: 50%; height: 50%; border-radius: 20px; display: block; margin-left: auto; margin-right: auto;
}
- content .img-fluid-portrait {
width: 30%; height: 30%; border-radius: 20px; display: block; margin-left: auto; margin-right: auto;
}
- content .carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2aaa0000' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
- content .carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2aaa0000' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);
}
/* Featurettes
*/
- content .featurette-divider {
margin: 5rem 0;/* Space out the Bootstrap
more */
}
/* Thin out the marketing headings */
- content .featurette-heading {
font-weight: 300; line-height: 1; letter-spacing: -.05rem;
}
- content .featurette-subheading {
font-weight: 300; font-size: 2.5rem; line-height: 1; letter-spacing: -.05rem;
}
- content .featurette-image {
border-radius: 100%; width: 100%; height: auto;
}
/* Remove bootstrap dropdown caret */
- content .dropdown-toggle::after {
display: none
}
/* Bootstrap dropdown on hover*/
@media (min-width: 992px) {
#content .dropdown:hover .dropdown-menu { display: block; margin-top: 0; animation: fadeInPop 100ms linear; }
}
/* RESPONSIVE CSS
*/
@media (min-width: 40em) {
#content .featurette-heading { font-size: 3.5rem; }
}
/* @media (min-width: 62em) {
#content .featurette-heading { margin-top: 7rem; }
}*/