Difference between revisions of "Template:UPF CRG Barcelona/css"

(Created page with "/*iGEM Barcelona UPF CRG Stylesheet */ →‎Color variables: :root { --main-color: #f2f3f4; --var1-color: #99CFB2; --var2-color: #495F7F; --hovered-color: #589...")
 
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
/*iGEM Barcelona UPF CRG Stylesheet */
+
<html>
 +
<style type="text/css">
 +
@import url("https://fonts.googleapis.com/css?family=PT+Sans");
 +
html {
 +
font-family: "PT Sans", sans-serif
 +
}
  
−
/*Color variables*/
 
  
−
:root {
+
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
−
    --main-color: #f2f3f4;
+
 
−
    --var1-color: #99CFB2;
+
html {
−
    --var2-color: #495F7F;
+
line-height: 1.15;
−
    --hovered-color: #589EFF;
+
-webkit-text-size-adjust: 100%
−
    --menu-clicked-color: #AFAFB0;
+
 
}
 
}
  
−
/*Defaults*/
+
body {
 +
margin: 0
 +
}
  
−
* {
+
h1 {
−
    font-family: "roboto_monoregular";
+
font-size: 2em;
 +
margin: 0.67em 0
 
}
 
}
  
−
/*Body Style*/
+
hr {
 +
-webkit-box-sizing: content-box;
 +
box-sizing: content-box;
 +
height: 0;
 +
overflow: visible
 +
}
  
−
body {
+
pre {
−
    margin: 1em;
+
font-family: monospace, monospace;
−
    background-color: var(--main-color);
+
font-size: 1em
 
}
 
}
  
−
/*Page Template*/
+
a {
 +
background-color: transparent
 +
}
  
−
.grid-container {
+
abbr[title] {
−
    display: grid;
+
border-bottom: none;
−
    grid-template-areas: 'header' 'main' 'footer';
+
text-decoration: underline;
−
    grid-gap: 1em;
+
-webkit-text-decoration: underline dotted;
 +
text-decoration: underline dotted
 
}
 
}
  
−
/*Main Areas*/
+
b,
 +
strong {
 +
font-weight: bolder
 +
}
 +
 
 +
code,
 +
kbd,
 +
samp {
 +
font-family: monospace, monospace;
 +
font-size: 1em
 +
}
 +
 
 +
small {
 +
font-size: 80%
 +
}
 +
 
 +
sub,
 +
sup {
 +
font-size: 75%;
 +
line-height: 0;
 +
position: relative;
 +
vertical-align: baseline
 +
}
 +
 
 +
sub {
 +
bottom: -0.25em
 +
}
 +
 
 +
sup {
 +
top: -0.5em
 +
}
 +
 
 +
img {
 +
border-style: none
 +
}
 +
 
 +
button,
 +
input,
 +
optgroup,
 +
select,
 +
textarea {
 +
font-family: inherit;
 +
font-size: 100%;
 +
line-height: 1.15;
 +
margin: 0
 +
}
 +
 
 +
button,
 +
input {
 +
overflow: visible
 +
}
 +
 
 +
button,
 +
select {
 +
text-transform: none
 +
}
 +
 
 +
button,
 +
[type="button"],
 +
[type="reset"],
 +
[type="submit"] {
 +
-webkit-appearance: button
 +
}
 +
 
 +
button::-moz-focus-inner,
 +
[type="button"]::-moz-focus-inner,
 +
[type="reset"]::-moz-focus-inner,
 +
[type="submit"]::-moz-focus-inner {
 +
border-style: none;
 +
padding: 0
 +
}
 +
 
 +
button:-moz-focusring,
 +
[type="button"]:-moz-focusring,
 +
[type="reset"]:-moz-focusring,
 +
[type="submit"]:-moz-focusring {
 +
outline: 1px dotted ButtonText
 +
}
 +
 
 +
fieldset {
 +
padding: 0.35em 0.75em 0.625em
 +
}
 +
 
 +
legend {
 +
-webkit-box-sizing: border-box;
 +
box-sizing: border-box;
 +
color: inherit;
 +
display: table;
 +
max-width: 100%;
 +
padding: 0;
 +
white-space: normal
 +
}
 +
 
 +
progress {
 +
vertical-align: baseline
 +
}
 +
 
 +
textarea {
 +
overflow: auto
 +
}
 +
 
 +
[type="checkbox"],
 +
[type="radio"] {
 +
-webkit-box-sizing: border-box;
 +
box-sizing: border-box;
 +
padding: 0
 +
}
 +
 
 +
[type="number"]::-webkit-inner-spin-button,
 +
[type="number"]::-webkit-outer-spin-button {
 +
height: auto
 +
}
 +
 
 +
[type="search"] {
 +
-webkit-appearance: textfield;
 +
outline-offset: -2px
 +
}
 +
 
 +
[type="search"]::-webkit-search-decoration {
 +
-webkit-appearance: none
 +
}
 +
 
 +
::-webkit-file-upload-button {
 +
-webkit-appearance: button;
 +
font: inherit
 +
}
 +
 
 +
details {
 +
display: block
 +
}
 +
 
 +
summary {
 +
display: list-item
 +
}
 +
 
 +
template {
 +
display: none
 +
}
 +
 
 +
[hidden] {
 +
display: none
 +
}
 +
 
 +
html {
 +
-webkit-box-sizing: border-box;
 +
box-sizing: border-box
 +
}
 +
 
 +
*,
 +
*:before,
 +
*:after {
 +
-webkit-box-sizing: inherit;
 +
box-sizing: inherit
 +
}
 +
 
 +
.container {
 +
margin: 0 auto;
 +
max-width: 1450px;
 +
padding: 0 2rem
 +
}
 +
 
 +
main {
 +
margin: 0 auto;
 +
max-width: 1450px;
 +
padding: 0 2rem;
 +
font-family: "PT Sans", sans-serif;
 +
font-weight: 400
 +
}
 +
 
 +
section,
 +
header {
 +
display: -webkit-box;
 +
display: -ms-flexbox;
 +
display: flex;
 +
-webkit-box-orient: horizontal;
 +
-webkit-box-direction: normal;
 +
-ms-flex-direction: row;
 +
flex-direction: row;
 +
-ms-flex-wrap: wrap;
 +
flex-wrap: wrap
 +
}
 +
 
 +
article,
 +
aside {
 +
-ms-flex-preferred-size: 100%;
 +
flex-basis: 100%
 +
}
 +
 
 +
.heading {
 +
font-family: "PT Sans", sans-serif;
 +
font-weight: 700
 +
}
 +
 
 +
header {
 +
margin: 0 auto;
 +
max-width: 1450px;
 +
padding: 0 2rem;
 +
margin: 1rem 0
 +
}
  
 
.header {
 
.header {
−
    grid-area: header;
+
-ms-flex-preferred-size: 100%;
 +
flex-basis: 100%;
 +
-webkit-box-flex: 10;
 +
-ms-flex: 10;
 +
flex: 10
 
}
 
}
  
−
.main {
+
.header-title {
−
    grid-area: main;
+
color: #007F6E;
 +
font-size: 5rem;
 +
text-align: center;
 +
margin: .25em 0 .1em
 
}
 
}
  
−
.footer {
+
.header-subtitle {
−
    grid-area: footer;
+
display: block;
−
    grid-template-areas: 'contact_media copyright sponsors';
+
margin-left: auto;
−
    display: inline;
+
margin-right: auto;
 +
font-size: 1.25rem;
 +
text-align: center
 
}
 
}
  
−
/*navigation list*/
+
.header-fixed {
 +
position: -webkit-sticky;
 +
position: sticky;
 +
top: 0
 +
}
  
−
#navlist {
+
.header-blur {
−
    padding: 7px 7px 10px 100px;
+
position: absolute;
−
    margin: 0px 0px 20px 0px;
+
top: 0px;
−
    text-align: center;
+
right: 0px;
−
    letter-spacing: 2px;
+
bottom: 0px;
−
    color: #3b444b;
+
left: 0px;
−
    background: #AFAFB0;
+
background-color: rgba(255, 255, 255, 0.9);
 +
-webkit-backdrop-filter: blur(2.5px);
 +
backdrop-filter: blur(2.5px)
 
}
 
}
  
−
#navlist li {
+
@media screen and (min-width: 800px) {
−
    list-style: none;
+
.intro {
−
    margin: auto;
+
max-width: 800px;
−
    display: inline;
+
margin-left: auto;
 +
margin-right: auto;
 +
font-size: 1.25rem;
 +
text-align: center
 +
}
 
}
 
}
  
−
#navlist li a {
+
.button,
−
    padding: 5px 0.75em;
+
.button--ghost,
−
    margin: auto;
+
.button--sharp,
−
    padding: 4px 4px 4px 4px;
+
.button--ghost--sharp {
−
    color: #fff;
+
font-family: "PT Sans", sans-serif;
−
    background: #AFAFB0;
+
font-weight: 400;
−
    text-decoration: none;
+
-webkit-box-align: center;
 +
-ms-flex-align: center;
 +
align-items: center;
 +
-webkit-box-shadow: none;
 +
box-shadow: none;
 +
display: -webkit-inline-box;
 +
display: -ms-inline-flexbox;
 +
display: inline-flex;
 +
height: 3rem;
 +
line-height: 1.5;
 +
padding-bottom: calc(0.375rem - 1px);
 +
padding-top: calc(0.375rem - 1px);
 +
position: relative;
 +
vertical-align: top;
 +
-webkit-user-select: none;
 +
-moz-user-select: none;
 +
-ms-user-select: none;
 +
user-select: none;
 +
color: #fff;
 +
cursor: auto;
 +
-webkit-box-pack: center;
 +
-ms-flex-pack: center;
 +
justify-content: center;
 +
padding-left: 0.75rem;
 +
padding-right: 0.75rem;
 +
text-align: center;
 +
white-space: nowrap;
 +
text-decoration: none;
 +
font-size: 1rem
 
}
 
}
  
−
#navlist li a:link {
+
@media screen and (max-width: 768px) {
−
    color: #fff;
+
.button,
−
    padding: 4px 4px 4px 4px;
+
.button--ghost,
−
    background: #AFAFB0;
+
.button--sharp,
 +
.button--ghost--sharp {
 +
margin-bottom: .15rem;
 +
margin-top: .15rem
 +
}
 
}
 
}
  
−
#navlist li a:visited {
+
.button {
−
    color: #fff;
+
background-color: #00d1b2;
−
    padding: 4px 4px 4px 4px;
+
border: none;
−
    background: #589eff;
+
border-radius: 12px;
 +
cursor: pointer
 
}
 
}
  
−
#navlist li a:hover {
+
.button:hover {
−
    color: #000;
+
background-color: #00b89c
−
    padding: 4px 4px 4px 4px;
+
−
    background: #e6bdbd;
+
 
}
 
}
  
−
#navlist li a#current {
+
p {
−
    color: #000;
+
text-align: justify
−
    padding: 4px 4px 4px 4px;
+
−
    margin: 0 0 20 0;
+
−
    background: #bba2c7
+
 
}
 
}
  
−
ul {
+
.navbar {
−
    list-style-type: none;
+
background-color: #36393d;
−
    margin: auto;
+
color: #fff;
−
    overflow: hidden;
+
font-family: "PT Sans", sans-serif;
−
    background-color: #333;
+
min-height: 2.5em;
−
    text-align: center;
+
position: relative
 
}
 
}
  
−
li a, .dropbtn {
+
.navbar>.container {
−
    display: inline-block;
+
-webkit-box-align: stretch;
−
    color: white;
+
-ms-flex-align: stretch;
−
    text-align: left;
+
align-items: stretch;
−
    padding: 50px 16px;
+
display: -webkit-box;
−
    text-decoration: none;
+
display: -ms-flexbox;
 +
display: flex;
 +
min-height: 2.5em;
 +
width: 100%
 
}
 
}
  
−
li a: hover,
+
.navbar.has-shadow {
−
.dropdown:hover .dropbtn {
+
-webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
−
    position: absolute;
+
box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1)
 +
}
  
 +
.navbar-brand {
 +
-webkit-box-align: stretch;
 +
-ms-flex-align: stretch;
 +
align-items: stretch;
 +
display: -webkit-box;
 +
display: -ms-flexbox;
 +
display: flex;
 +
-ms-flex-negative: 0;
 +
flex-shrink: 0;
 +
min-height: 2.5em
 
}
 
}
  
−
li.dropdown {
+
.navbar-burger {
−
    display: inline-block;
+
cursor: pointer;
 +
display: block;
 +
height: 3.75rem;
 +
margin-left: auto;
 +
position: relative;
 +
width: 3.75rem
 
}
 
}
  
−
.dropdown-content {
+
.navbar-burger span {
−
    display: none;
+
background-color: currentColor;
−
    position: absolute;
+
display: block;
−
    background-color: #f9f9f9;
+
height: 1px;
−
    min-width: 160px;
+
left: 50%;
−
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
+
margin-left: -7px;
 +
position: absolute;
 +
top: 50%;
 +
-webkit-transition: none 86ms ease-out;
 +
transition: none 86ms ease-out;
 +
-webkit-transition-property: background, left, opacity, -webkit-transform;
 +
transition-property: background, left, opacity, -webkit-transform;
 +
transition-property: background, left, opacity, transform;
 +
transition-property: background, left, opacity, transform, -webkit-transform;
 +
width: 15px
 
}
 
}
  
−
.dropdown-content a {
+
.navbar-burger span:nth-child(1) {
−
    color: black;
+
margin-top: -6px
−
    padding: 10px 16px;
+
−
    text-decoration: none;
+
−
    display: block;
+
 
}
 
}
  
−
.dropdown-content a:hove {
+
.navbar-burger span:nth-child(2) {
−
    background-color: #f1f1f1
+
margin-top: -1px
 
}
 
}
  
 +
.navbar-burger span:nth-child(3) {
 +
margin-top: 4px
 +
}
  
−
/*Social Media*/
+
.navbar-burger:hover {
 +
background-color: rgba(0, 0, 0, 0.05)
 +
}
  
−
.twitter {
+
.navbar-burger.is-active span:nth-child(1) {
−
    grid-area: twitter;
+
margin-left: -5px;
 +
-webkit-transform: rotate(45deg);
 +
transform: rotate(45deg);
 +
-webkit-transform-origin: left top;
 +
transform-origin: left top
 
}
 
}
  
−
.instagram {
+
.navbar-burger.is-active span:nth-child(2) {
−
    grid-area: instagram;
+
opacity: 0
 
}
 
}
  
−
/*General Styling*/
+
.navbar-burger.is-active span:nth-child(3) {
 +
margin-left: -5px;
 +
-webkit-transform: rotate(-45deg);
 +
transform: rotate(-45deg);
 +
-webkit-transform-origin: left bottom;
 +
transform-origin: left bottom
 +
}
 +
 
 +
.navbar-menu {
 +
display: none
 +
}
 +
 
 +
.navbar-menu .navbar-grid {
 +
width: 100%;
 +
display: -ms-grid;
 +
display: grid;
 +
-ms-grid-columns: (1fr)[7];
 +
grid-template-columns: repeat(7, 1fr);
 +
grid-gap: 1rem
 +
}
 +
 
 +
a.navbar-item {
 +
display: -webkit-box;
 +
display: -ms-flexbox;
 +
display: flex;
 +
-webkit-box-pack: center;
 +
-ms-flex-pack: center;
 +
justify-content: center;
 +
-webkit-box-align: center;
 +
-ms-flex-align: center;
 +
align-items: center;
 +
cursor: pointer;
 +
text-decoration: none;
 +
font-weight: 600;
 +
text-transform: uppercase
 +
}
 +
 
 +
.navbar-item,
 +
.navbar-link {
 +
color: #f2f2f2;
 +
line-height: 2;
 +
padding: 0.1rem .1rem;
 +
font-size: 1rem
 +
}
 +
 
 +
.navbar-logo {
 +
padding: 0.75rem 1rem
 +
}
 +
 
 +
.navbar-logo img {
 +
height: 2.5em
 +
}
 +
 
 +
a.navbar-item:hover,
 +
.navbar-link:hover {
 +
background-color: #36393d;
 +
color: #f2f2f2
 +
}
 +
 
 +
a.navbar-item.is-active,
 +
.navbar-link.is-active {
 +
background-color: #36393d;
 +
color: #fff
 +
}
 +
 
 +
a.navbar-item.is-active:not(:hover),
 +
.navbar-link.is-active:not(:hover) {
 +
background-color: #36393d
 +
}
 +
 
 +
.navbar-item {
 +
-webkit-box-flex: 0;
 +
-ms-flex-positive: 0;
 +
flex-grow: 0;
 +
-ms-flex-negative: 0;
 +
flex-shrink: 0
 +
}
 +
 
 +
.navbar-item img {
 +
max-height: 2.25rem
 +
}
 +
 
 +
.navbar-item.has-dropdown {
 +
padding: 0
 +
}
 +
 
 +
.navbar-link {
 +
padding-right: 2.5em
 +
}
 +
 
 +
.navbar-dropdown {
 +
font-size: 0.875rem;
 +
padding-bottom: 0.5rem;
 +
padding-top: 0.5rem
 +
}
 +
 
 +
.navbar-dropdown .navbar-item {
 +
padding-left: 1.5rem;
 +
padding-right: 1.5rem
 +
}
 +
 
 +
.navbar-divider {
 +
background-color: #dbdbdb;
 +
border: 0;
 +
display: none;
 +
height: 1px;
 +
margin: 0.5rem 0
 +
}
 +
 
 +
@media screen and (max-width: 1250px) {
 +
.navbar-menu .navbar-grid {
 +
width: 100%;
 +
display: -ms-grid;
 +
display: grid;
 +
-ms-grid-columns: auto;
 +
grid-template-columns: auto;
 +
grid-auto-rows: repeat(7, 1fr);
 +
grid-gap: 1rem
 +
}
 +
.navbar>.container {
 +
display: block;
 +
padding: 0
 +
}
 +
.navbar-brand .navbar-item {
 +
-webkit-box-align: center;
 +
-ms-flex-align: center;
 +
align-items: center;
 +
display: -webkit-box;
 +
display: -ms-flexbox;
 +
display: flex
 +
}
 +
.navbar-menu {
 +
background-color: #36393d;
 +
-webkit-box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
 +
box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
 +
padding: 0.5rem 0
 +
}
 +
.navbar-menu.is-active {
 +
display: block
 +
}
 +
}
 +
 
 +
@media screen and (min-width: 1250px) {
 +
.navbar,
 +
.navbar-menu,
 +
.navbar-start,
 +
.navbar-end {
 +
display: -webkit-box;
 +
display: -ms-flexbox;
 +
display: flex
 +
}
 +
.navbar-menu .navbar-grid {
 +
width: 100%;
 +
display: -ms-grid;
 +
display: grid;
 +
-ms-grid-columns: (1fr)[7];
 +
grid-template-columns: repeat(7, 1fr);
 +
grid-auto-rows: auto;
 +
grid-gap: 1rem
 +
}
 +
.navbar {
 +
min-height: 2.5em
 +
}
 +
.navbar.is-transparent a.navbar-item:hover,
 +
.navbar.is-transparent a.navbar-item.is-active {
 +
background-color: transparent
 +
}
 +
.navbar.is-transparent .navbar-link:hover,
 +
.navbar.is-transparent .navbar-link.is-active {
 +
background-color: transparent
 +
}
 +
.navbar.is-transparent .navbar-item.has-dropdown.is-active .navbar-link,
 +
.navbar.is-transparent .navbar-item.has-dropdown.is-hoverable:hover .navbar-link {
 +
background-color: transparent
 +
}
 +
.navbar-burger {
 +
display: none
 +
}
 +
.navbar-item,
 +
.navbar-link {
 +
-webkit-box-align: center;
 +
-ms-flex-align: center;
 +
align-items: center;
 +
display: -webkit-box;
 +
display: -ms-flexbox;
 +
display: flex
 +
}
 +
.navbar-item.has-dropdown {
 +
-webkit-box-align: stretch;
 +
-ms-flex-align: stretch;
 +
align-items: stretch
 +
}
 +
.navbar-item.is-active .navbar-dropdown,
 +
.navbar-item.is-hoverable:hover .navbar-dropdown {
 +
display: block
 +
}
 +
.navbar-item.is-active .navbar-dropdown.is-boxed,
 +
.navbar-item.is-hoverable:hover .navbar-dropdown.is-boxed {
 +
opacity: 1;
 +
pointer-events: auto;
 +
-webkit-transform: translateY(0);
 +
transform: translateY(0)
 +
}
 +
.navbar-link::after {
 +
border: 1px solid #46aef7;
 +
border-right: 0;
 +
border-top: 0;
 +
content: " ";
 +
display: block;
 +
height: 0.5em;
 +
margin-top: -0.375em;
 +
pointer-events: none;
 +
position: absolute;
 +
right: 1.125em;
 +
top: 50%;
 +
-webkit-transform: rotate(-45deg);
 +
transform: rotate(-45deg);
 +
width: 0.5em
 +
}
 +
.navbar-menu {
 +
-webkit-box-flex: 1;
 +
-ms-flex-positive: 1;
 +
flex-grow: 1;
 +
-ms-flex-negative: 0;
 +
flex-shrink: 0
 +
}
 +
.navbar-start {
 +
-webkit-box-pack: start;
 +
-ms-flex-pack: start;
 +
justify-content: flex-start;
 +
margin-right: auto
 +
}
 +
.navbar-end {
 +
-webkit-box-pack: end;
 +
-ms-flex-pack: end;
 +
justify-content: flex-end;
 +
margin-left: auto
 +
}
 +
.navbar-dropdown {
 +
background-color: #36393d;
 +
border-bottom-left-radius: 5px;
 +
border-bottom-right-radius: 5px;
 +
border-top: 1px solid #dbdbdb;
 +
-webkit-box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1);
 +
box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1);
 +
display: none;
 +
font-size: 0.875rem;
 +
left: 0;
 +
min-width: 100%;
 +
position: absolute;
 +
top: 100%;
 +
z-index: 20
 +
}
 +
.navbar-dropdown .navbar-item {
 +
padding: .375rem 2rem .375rem 1rem;
 +
white-space: nowrap
 +
}
 +
.navbar-dropdown a.navbar-item:hover {
 +
background-color: #36393d;
 +
color: #fff
 +
}
 +
.navbar-dropdown a.navbar-item.is-active {
 +
background-color: #36393d;
 +
color: #46aef7;
 +
font-weight: 700
 +
}
 +
.navbar-dropdown.is-boxed {
 +
border-radius: 5px;
 +
border-top: 0;
 +
-webkit-box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
 +
box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
 +
display: block;
 +
opacity: 0;
 +
pointer-events: none;
 +
top: calc(100% + (-4px));
 +
-webkit-transform: translateY(-5px);
 +
transform: translateY(-5px);
 +
-webkit-transition-duration: 86ms;
 +
transition-duration: 86ms;
 +
-webkit-transition-property: opacity, -webkit-transform;
 +
transition-property: opacity, -webkit-transform;
 +
transition-property: opacity, transform;
 +
transition-property: opacity, transform, -webkit-transform
 +
}
 +
.navbar-dropdown.is-right {
 +
left: auto;
 +
right: 0
 +
}
 +
.navbar-divider {
 +
display: block
 +
}
 +
.container>.navbar .navbar-brand {
 +
margin-left: -1rem
 +
}
 +
.container>.navbar .navbar-menu {
 +
margin-right: -1rem
 +
}
 +
a.navbar-item.is-active,
 +
.navbar-link.is-active {
 +
color: #fff
 +
}
 +
.navbar-item.has-dropdown:hover .navbar-link,
 +
.navbar-item.has-dropdown.is-active .navbar-link {
 +
background-color: #36393d
 +
}
 +
}
 +
 
 +
.swiper-container {
 +
margin: 0 auto;
 +
position: relative;
 +
overflow: hidden;
 +
list-style: none;
 +
padding: 0;
 +
z-index: 1
 +
}
 +
 
 +
.swiper-container-no-flexbox .swiper-slide {
 +
float: left
 +
}
 +
 
 +
.swiper-container-vertical>.swiper-wrapper {
 +
-webkit-box-orient: vertical;
 +
-webkit-box-direction: normal;
 +
-ms-flex-direction: column;
 +
flex-direction: column
 +
}
 +
 
 +
.swiper-wrapper-not-touch {
 +
position: relative;
 +
width: 100%;
 +
height: 100%;
 +
z-index: 1;
 +
display: -webkit-box;
 +
display: -ms-flexbox;
 +
display: flex;
 +
-webkit-transition-property: -webkit-transform;
 +
transition-property: -webkit-transform;
 +
transition-property: transform;
 +
transition-property: transform, -webkit-transform;
 +
-webkit-box-sizing: content-box;
 +
box-sizing: content-box
 +
}
 +
 
 +
.swiper-wrapper {
 +
position: relative;
 +
width: 100%;
 +
height: 100%;
 +
z-index: 1;
 +
display: -webkit-box;
 +
display: -ms-flexbox;
 +
display: flex;
 +
-webkit-transition-property: -webkit-transform;
 +
transition-property: -webkit-transform;
 +
transition-property: transform;
 +
transition-property: transform, -webkit-transform;
 +
-webkit-box-sizing: content-box;
 +
box-sizing: content-box
 +
}
 +
 
 +
.swiper-container-android .swiper-slide,
 +
.swiper-wrapper {
 +
-webkit-transform: translate3d(0, 0, 0);
 +
transform: translate3d(0, 0, 0)
 +
}
 +
 
 +
.swiper-container-multirow>.swiper-wrapper {
 +
-ms-flex-wrap: wrap;
 +
flex-wrap: wrap
 +
}
 +
 
 +
.swiper-container-free-mode>.swiper-wrapper {
 +
-webkit-transition-timing-function: ease-out;
 +
transition-timing-function: ease-out;
 +
margin: 0 auto
 +
}
 +
 
 +
.swiper-slide {
 +
-ms-flex-negative: 0;
 +
flex-shrink: 0;
 +
width: 100%;
 +
height: 100%;
 +
position: relative;
 +
-webkit-transition-property: -webkit-transform;
 +
transition-property: -webkit-transform;
 +
transition-property: transform;
 +
transition-property: transform, -webkit-transform
 +
}
 +
 
 +
.swiper-invisible-blank-slide {
 +
visibility: hidden
 +
}
 +
 
 +
.swiper-container-autoheight,
 +
.swiper-container-autoheight .swiper-slide {
 +
height: auto
 +
}
 +
 
 +
.swiper-container-autoheight .swiper-wrapper {
 +
-webkit-box-align: start;
 +
-ms-flex-align: start;
 +
align-items: flex-start;
 +
-webkit-transition-property: height, -webkit-transform;
 +
transition-property: height, -webkit-transform;
 +
transition-property: transform, height;
 +
transition-property: transform, height, -webkit-transform
 +
}
 +
 
 +
.swiper-container-3d {
 +
-webkit-perspective: 1200px;
 +
perspective: 1200px
 +
}
 +
 
 +
.swiper-container-3d .swiper-cube-shadow,
 +
.swiper-container-3d .swiper-slide,
 +
.swiper-container-3d .swiper-slide-shadow-bottom,
 +
.swiper-container-3d .swiper-slide-shadow-left,
 +
.swiper-container-3d .swiper-slide-shadow-right,
 +
.swiper-container-3d .swiper-slide-shadow-top,
 +
.swiper-container-3d .swiper-wrapper {
 +
-webkit-transform-style: preserve-3d;
 +
transform-style: preserve-3d
 +
}
 +
 
 +
.swiper-container-3d .swiper-slide-shadow-bottom,
 +
.swiper-container-3d .swiper-slide-shadow-left,
 +
.swiper-container-3d .swiper-slide-shadow-right,
 +
.swiper-container-3d .swiper-slide-shadow-top {
 +
position: absolute;
 +
left: 0;
 +
top: 0;
 +
width: 100%;
 +
height: 100%;
 +
pointer-events: none;
 +
z-index: 10
 +
}
 +
 
 +
.swiper-container-3d .swiper-slide-shadow-left {
 +
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
 +
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))
 +
}
 +
 
 +
.swiper-container-3d .swiper-slide-shadow-right {
 +
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
 +
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))
 +
}
 +
 
 +
.swiper-container-3d .swiper-slide-shadow-top {
 +
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
 +
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))
 +
}
 +
 
 +
.swiper-container-3d .swiper-slide-shadow-bottom {
 +
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
 +
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))
 +
}
 +
 
 +
.swiper-container-wp8-horizontal,
 +
.swiper-container-wp8-horizontal>.swiper-wrapper {
 +
-ms-touch-action: pan-y;
 +
touch-action: pan-y
 +
}
 +
 
 +
.swiper-container-wp8-vertical,
 +
.swiper-container-wp8-vertical>.swiper-wrapper {
 +
-ms-touch-action: pan-x;
 +
touch-action: pan-x
 +
}
 +
 
 +
.swiper-button-next,
 +
.swiper-button-prev {
 +
position: absolute;
 +
top: 50%;
 +
width: 27px;
 +
height: 44px;
 +
margin-top: -22px;
 +
z-index: 10;
 +
cursor: pointer;
 +
background-size: 27px 44px;
 +
background-position: center;
 +
background-repeat: no-repeat
 +
}
 +
 
 +
.swiper-button-next.swiper-button-disabled,
 +
.swiper-button-prev.swiper-button-disabled {
 +
opacity: .35;
 +
cursor: auto;
 +
pointer-events: none
 +
}
 +
 
 +
.swiper-button-prev,
 +
.swiper-container-rtl .swiper-button-next {
 +
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
 +
left: 10px;
 +
right: auto
 +
}
 +
 
 +
.swiper-button-next,
 +
.swiper-container-rtl .swiper-button-prev {
 +
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
 +
right: 10px;
 +
left: auto
 +
}
 +
 
 +
.swiper-button-prev.swiper-button-white,
 +
.swiper-container-rtl .swiper-button-next.swiper-button-white {
 +
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")
 +
}
 +
 
 +
.swiper-button-next.swiper-button-white,
 +
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
 +
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")
 +
}
 +
 
 +
.swiper-button-prev.swiper-button-black,
 +
.swiper-container-rtl .swiper-button-next.swiper-button-black {
 +
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")
 +
}
 +
 
 +
.swiper-button-next.swiper-button-black,
 +
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
 +
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")
 +
}
 +
 
 +
.swiper-button-lock {
 +
display: none
 +
}
 +
 
 +
.swiper-pagination {
 +
position: absolute;
 +
text-align: center;
 +
-webkit-transition: .3s opacity;
 +
transition: .3s opacity;
 +
-webkit-transform: translate3d(0, 0, 0);
 +
transform: translate3d(0, 0, 0);
 +
z-index: 10
 +
}
 +
 
 +
.swiper-pagination.swiper-pagination-hidden {
 +
opacity: 0
 +
}
 +
 
 +
.swiper-container-horizontal>.swiper-pagination-bullets,
 +
.swiper-pagination-custom,
 +
.swiper-pagination-fraction {
 +
bottom: 10px;
 +
left: 0;
 +
width: 100%
 +
}
 +
 
 +
.swiper-pagination-bullets-dynamic {
 +
overflow: hidden;
 +
font-size: 0
 +
}
 +
 
 +
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
 +
-webkit-transform: scale(0.33);
 +
transform: scale(0.33);
 +
position: relative
 +
}
 +
 
 +
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
 +
-webkit-transform: scale(1);
 +
transform: scale(1)
 +
}
 +
 
 +
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
 +
-webkit-transform: scale(1);
 +
transform: scale(1)
 +
}
 +
 
 +
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
 +
-webkit-transform: scale(0.66);
 +
transform: scale(0.66)
 +
}
 +
 
 +
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
 +
-webkit-transform: scale(0.33);
 +
transform: scale(0.33)
 +
}
 +
 
 +
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
 +
-webkit-transform: scale(0.66);
 +
transform: scale(0.66)
 +
}
 +
 
 +
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
 +
-webkit-transform: scale(0.33);
 +
transform: scale(0.33)
 +
}
 +
 
 +
.swiper-pagination-bullet {
 +
width: 8px;
 +
height: 8px;
 +
display: inline-block;
 +
border-radius: 100%;
 +
background: #000;
 +
opacity: .2
 +
}
 +
 
 +
button.swiper-pagination-bullet {
 +
border: none;
 +
margin: 0;
 +
padding: 0;
 +
-webkit-box-shadow: none;
 +
box-shadow: none;
 +
-webkit-appearance: none;
 +
-moz-appearance: none;
 +
appearance: none
 +
}
 +
 
 +
.swiper-pagination-clickable .swiper-pagination-bullet {
 +
cursor: pointer
 +
}
 +
 
 +
.swiper-pagination-bullet-active {
 +
opacity: 1;
 +
background: #007aff
 +
}
 +
 
 +
.swiper-container-vertical>.swiper-pagination-bullets {
 +
right: 10px;
 +
top: 50%;
 +
-webkit-transform: translate3d(0, -50%, 0);
 +
transform: translate3d(0, -50%, 0)
 +
}
 +
 
 +
.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
 +
margin: 6px 0;
 +
display: block
 +
}
 +
 
 +
.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
 +
top: 50%;
 +
-webkit-transform: translateY(-50%);
 +
transform: translateY(-50%);
 +
width: 8px
 +
}
 +
 
 +
.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
 +
display: inline-block;
 +
-webkit-transition: .2s top, .2s -webkit-transform;
 +
transition: .2s top, .2s -webkit-transform;
 +
-webkit-transition: .2s transform, .2s top;
 +
transition: .2s transform, .2s top;
 +
-webkit-transition: .2s transform, .2s top, .2s -webkit-transform;
 +
transition: .2s transform, .2s top, .2s -webkit-transform
 +
}
 +
 
 +
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
 +
margin: 0 4px
 +
}
 +
 
 +
.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
 +
left: 50%;
 +
-webkit-transform: translateX(-50%);
 +
transform: translateX(-50%);
 +
white-space: nowrap
 +
}
 +
 
 +
.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
 +
-webkit-transition: .2s left, .2s -webkit-transform;
 +
transition: .2s left, .2s -webkit-transform;
 +
-webkit-transition: .2s transform, .2s left;
 +
transition: .2s transform, .2s left;
 +
-webkit-transition: .2s transform, .2s left, .2s -webkit-transform;
 +
transition: .2s transform, .2s left, .2s -webkit-transform
 +
}
 +
 
 +
.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
 +
-webkit-transition: .2s right, .2s -webkit-transform;
 +
transition: .2s right, .2s -webkit-transform;
 +
-webkit-transition: .2s transform, .2s right;
 +
transition: .2s transform, .2s right;
 +
-webkit-transition: .2s transform, .2s right, .2s -webkit-transform;
 +
transition: .2s transform, .2s right, .2s -webkit-transform
 +
}
 +
 
 +
.swiper-pagination-progressbar {
 +
background: rgba(0, 0, 0, 0.25);
 +
position: absolute
 +
}
 +
 
 +
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
 +
background: #007aff;
 +
position: absolute;
 +
left: 0;
 +
top: 0;
 +
width: 100%;
 +
height: 100%;
 +
-webkit-transform: scale(0);
 +
transform: scale(0);
 +
-webkit-transform-origin: left top;
 +
transform-origin: left top
 +
}
 +
 
 +
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
 +
-webkit-transform-origin: right top;
 +
transform-origin: right top
 +
}
 +
 
 +
.swiper-container-horizontal>.swiper-pagination-progressbar,
 +
.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
 +
width: 100%;
 +
height: 4px;
 +
left: 0;
 +
top: 0
 +
}
 +
 
 +
.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
 +
.swiper-container-vertical>.swiper-pagination-progressbar {
 +
width: 4px;
 +
height: 100%;
 +
left: 0;
 +
top: 0
 +
}
 +
 
 +
.swiper-pagination-white .swiper-pagination-bullet-active {
 +
background: #fff
 +
}
 +
 
 +
.swiper-pagination-progressbar.swiper-pagination-white {
 +
background: rgba(255, 255, 255, 0.25)
 +
}
 +
 
 +
.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill {
 +
background: #fff
 +
}
 +
 
 +
.swiper-pagination-black .swiper-pagination-bullet-active {
 +
background: #000
 +
}
 +
 
 +
.swiper-pagination-progressbar.swiper-pagination-black {
 +
background: rgba(0, 0, 0, 0.25)
 +
}
 +
 
 +
.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill {
 +
background: #000
 +
}
 +
 
 +
.swiper-pagination-lock {
 +
display: none
 +
}
 +
 
 +
.swiper-scrollbar {
 +
border-radius: 10px;
 +
position: relative;
 +
-ms-touch-action: none;
 +
background: rgba(0, 0, 0, 0.1)
 +
}
 +
 
 +
.swiper-container-horizontal>.swiper-scrollbar {
 +
position: absolute;
 +
left: 1%;
 +
bottom: 3px;
 +
z-index: 50;
 +
height: 5px;
 +
width: 98%
 +
}
 +
 
 +
.swiper-container-vertical>.swiper-scrollbar {
 +
position: absolute;
 +
right: 3px;
 +
top: 1%;
 +
z-index: 50;
 +
width: 5px;
 +
height: 98%
 +
}
 +
 
 +
.swiper-scrollbar-drag {
 +
height: 100%;
 +
width: 100%;
 +
position: relative;
 +
background: rgba(0, 0, 0, 0.5);
 +
border-radius: 10px;
 +
left: 0;
 +
top: 0
 +
}
 +
 
 +
.swiper-scrollbar-cursor-drag {
 +
cursor: move
 +
}
 +
 
 +
.swiper-scrollbar-lock {
 +
display: none
 +
}
 +
 
 +
.swiper-zoom-container {
 +
width: 100%;
 +
height: 100%;
 +
display: -webkit-box;
 +
display: -ms-flexbox;
 +
display: flex;
 +
-webkit-box-pack: center;
 +
-ms-flex-pack: center;
 +
justify-content: center;
 +
-webkit-box-align: center;
 +
-ms-flex-align: center;
 +
align-items: center;
 +
text-align: center
 +
}
 +
 
 +
.swiper-zoom-container>canvas,
 +
.swiper-zoom-container>img,
 +
.swiper-zoom-container>svg {
 +
max-width: 100%;
 +
max-height: 100%;
 +
-o-object-fit: contain;
 +
object-fit: contain
 +
}
 +
 
 +
.swiper-slide-zoomed {
 +
cursor: move
 +
}
 +
 
 +
.swiper-lazy-preloader {
 +
width: 42px;
 +
height: 42px;
 +
position: absolute;
 +
left: 50%;
 +
top: 50%;
 +
margin-left: -21px;
 +
margin-top: -21px;
 +
z-index: 10;
 +
-webkit-transform-origin: 50%;
 +
transform-origin: 50%;
 +
-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
 +
animation: swiper-preloader-spin 1s steps(12, end) infinite
 +
}
 +
 
 +
.swiper-lazy-preloader:after {
 +
display: block;
 +
content: '';
 +
width: 100%;
 +
height: 100%;
 +
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 +
background-position: 50%;
 +
background-size: 100%;
 +
background-repeat: no-repeat
 +
}
 +
 
 +
.swiper-lazy-preloader-white:after {
 +
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
 +
}
 +
 
 +
@-webkit-keyframes swiper-preloader-spin {
 +
100% {
 +
-webkit-transform: rotate(360deg);
 +
transform: rotate(360deg)
 +
}
 +
}
 +
 
 +
@keyframes swiper-preloader-spin {
 +
100% {
 +
-webkit-transform: rotate(360deg);
 +
transform: rotate(360deg)
 +
}
 +
}
 +
 
 +
.swiper-container .swiper-notification {
 +
position: absolute;
 +
left: 0;
 +
top: 0;
 +
pointer-events: none;
 +
opacity: 0;
 +
z-index: -1000
 +
}
 +
 
 +
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
 +
-webkit-transition-timing-function: ease-out;
 +
transition-timing-function: ease-out
 +
}
 +
 
 +
.swiper-container-fade .swiper-slide {
 +
pointer-events: none;
 +
-webkit-transition-property: opacity;
 +
transition-property: opacity
 +
}
 +
 
 +
.swiper-container-fade .swiper-slide .swiper-slide {
 +
pointer-events: none
 +
}
 +
 
 +
.swiper-container-fade .swiper-slide-active,
 +
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
 +
pointer-events: auto
 +
}
 +
 
 +
.swiper-container-cube {
 +
overflow: visible
 +
}
 +
 
 +
.swiper-container-cube .swiper-slide {
 +
pointer-events: none;
 +
-webkit-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
z-index: 1;
 +
visibility: hidden;
 +
-webkit-transform-origin: 0 0;
 +
transform-origin: 0 0;
 +
width: 100%;
 +
height: 100%
 +
}
 +
 
 +
.swiper-container-cube .swiper-slide .swiper-slide {
 +
pointer-events: none
 +
}
 +
 
 +
.swiper-container-cube.swiper-container-rtl .swiper-slide {
 +
-webkit-transform-origin: 100% 0;
 +
transform-origin: 100% 0
 +
}
 +
 
 +
.swiper-container-cube .swiper-slide-active,
 +
.swiper-container-cube .swiper-slide-active .swiper-slide-active {
 +
pointer-events: auto
 +
}
 +
 
 +
.swiper-container-cube .swiper-slide-active,
 +
.swiper-container-cube .swiper-slide-next,
 +
.swiper-container-cube .swiper-slide-next+.swiper-slide,
 +
.swiper-container-cube .swiper-slide-prev {
 +
pointer-events: auto;
 +
visibility: visible
 +
}
 +
 
 +
.swiper-container-cube .swiper-slide-shadow-bottom,
 +
.swiper-container-cube .swiper-slide-shadow-left,
 +
.swiper-container-cube .swiper-slide-shadow-right,
 +
.swiper-container-cube .swiper-slide-shadow-top {
 +
z-index: 0;
 +
-webkit-backface-visibility: hidden;
 +
backface-visibility: hidden
 +
}
 +
 
 +
.swiper-container-cube .swiper-cube-shadow {
 +
position: absolute;
 +
left: 0;
 +
bottom: 0;
 +
width: 100%;
 +
height: 100%;
 +
background: #000;
 +
opacity: .6;
 +
-webkit-filter: blur(50px);
 +
filter: blur(50px);
 +
z-index: 0
 +
}
 +
 
 +
.swiper-container-flip {
 +
overflow: visible
 +
}
 +
 
 +
.swiper-container-flip .swiper-slide {
 +
pointer-events: none;
 +
-webkit-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
z-index: 1
 +
}
 +
 
 +
.swiper-container-flip .swiper-slide .swiper-slide {
 +
pointer-events: none
 +
}
 +
 
 +
.swiper-container-flip .swiper-slide-active,
 +
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
 +
pointer-events: auto
 +
}
 +
 
 +
.swiper-container-flip .swiper-slide-shadow-bottom,
 +
.swiper-container-flip .swiper-slide-shadow-left,
 +
.swiper-container-flip .swiper-slide-shadow-right,
 +
.swiper-container-flip .swiper-slide-shadow-top {
 +
z-index: 0;
 +
-webkit-backface-visibility: hidden;
 +
backface-visibility: hidden
 +
}
 +
 
 +
.swiper-container-coverflow .swiper-wrapper {
 +
-webkit-perspective: 1200px;
 +
perspective: 1200px
 +
}
 +
 
 +
.swiper-container {
 +
width: 100%;
 +
height: 100%
 +
}
 +
 
 +
.swiper-margin {
 +
margin: 2rem 0
 +
}
 +
 
 +
.swiper-slide {
 +
text-align: center;
 +
display: -webkit-box;
 +
display: -ms-flexbox;
 +
display: flex;
 +
-webkit-box-pack: center;
 +
-ms-flex-pack: center;
 +
justify-content: center;
 +
align-items: center;
 +
-webkit-box-align: center;
 +
-ms-flex-align: center;
 +
-webkit-align-items: center;
 +
vertical-align: top;
 +
display: inline-block;
 +
cursor: pointer;
 +
text-decoration: none
 +
}
 +
 
 +
.swiper-slide p {
 +
text-align: center;
 +
color: #000000
 +
}
 +
 
 +
.footer {
 +
background-color: #36393d;
 +
color: #ffffff
 +
}
 +
 
 +
.footer .container {
 +
display: -ms-grid;
 +
display: grid;
 +
-ms-grid-columns: 1fr 1fr;
 +
grid-template-columns: 1fr 1fr;
 +
grid-gap: 1rem
 +
}
 +
 
 +
.footer .container div h3 {
 +
font-weight: 800
 +
}
 +
 
 +
.footer .container div a {
 +
padding: 0 .5rem
 +
}
 +
 
 +
@media screen and (max-width: 600px) {
 +
.footer .container {
 +
-ms-grid-columns: 1fr;
 +
grid-template-columns: 1fr;
 +
grid-auto-rows: 1fr 1fr
 +
}
 +
}
 +
 
 +
.igem_2018_team_menu.displaying_menu {
 +
display: none;
 +
}
 +
 
 +
.igem_2018_team_content {
 +
width: 100% !important;
 +
}
  
−
.header>img,
+
.igem_2018_team_content .igem_2018_team_column_wrapper {
−
.header>div {
+
margin: 0 !important;
−
    display: inline-block;
+
max-width: 9999px !important;
−
    vertical-align: middle;
+
width: 100% !important;
 
}
 
}
  
−
.footer>img {
+
.clear.extra_space {
−
    vertical-align: middle;
+
display: none;
 
}
 
}
 +
</style>
 +
</html>

Latest revision as of 18:51, 25 September 2018