Template:Vilnius-Lithuania/MainCSS

@font-face { font-family: "Futura"; src: url("https://static.igem.org/mediawiki/2018/4/49/T--Vilnius-Lithuania--FuturaPTMedium.woff") format("woff") }

@font-face { font-family: 'FuturaPTBook'; src: url("https://static.igem.org/mediawiki/2018/0/0f/T--Vilnius-Lithuania--FuturaPTBook.woff") format("woff"); font-weight: normal; font-style: normal }

@font-face { font-family: 'FuturaLightOblique'; src: url("https://static.igem.org/mediawiki/2018/e/ea/T--Vilnius-Lithuania--FuturaPTLightOblique.woff") format("woff"); font-weight: normal; font-style: normal }

@font-face { font-family: 'FuturaPTLight'; src: url("https://static.igem.org/mediawiki/2018/2/24/T--Vilnius-Lithuania--FuturaPTLight.woff") format("woff"); font-weight: normal; font-style: normal }

• ,

  after,

  before {

margin: 0; padding: 0; -webkit-box-sizing: inherit; box-sizing: inherit }

html { -webkit-box-sizing: border-box; box-sizing: border-box }

html body { position: relative; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap }

div.social-icons-area { position:absolute; bottom:0; left:50px; }

html body a { text-decoration: none; color: #000 }

html body a:visited { text-decoration: none; color: #332F2F !important; } html body ul, html body ol { list-style: none }

html .header-area { font-family: "FuturaPTLight", "sans-serif"; width: 100vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center }

html .header-area .close-icon { display: none }

html .header-area .hamburger-menu { display: none }

html .header-area .navigation { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-weight: 600; margin-top: 1%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 60% }

html .header-area .navigation .back { display: none }

html .header-area .navigation .navigation-list { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: nowrap; flex-wrap: nowrap }

html .header-area .navigation .navigation-list .navigation-list-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 35%; height: 15vh }

html .header-area .navigation .navigation-list .navigation-list-item .navigation-list-item-anchor { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-line-pack: end; align-content: flex-end; width: 65%; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; text-decoration: none; color: #000; text-transform: none }

html .header-area .navigation .navigation-list .navigation-list-item .navigation-list-item-anchor .image-container { padding: 1em }

html .header-area .navigation .navigation-list .navigation-list-item .navigation-list-item-anchor .image-container .image-logo { display: inline-block; vertical-align: middle; width: 2.88em }

html .header-area .navigation .navigation-list .navigation-list-item .navigation-list-item-anchor .image-logo-text { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; text-align: center; font-size: 1.2em; white-space: nowrap }

html .header-area .navigation .navigation-list .navigation-list-item:hover .image-container { background-color: #000; -webkit-box-shadow: 0px 0px 5px #000; box-shadow: 0px 0px 5px #000; border-radius: 100% }

html .header-area .navigation .navigation-list .navigation-list-item:hover .image-container .image-logo { -webkit-filter: invert(100%); filter: invert(100%) }

@media (max-width: 1600px) { html .navigation { margin-top: 2% !important } }

@media (max-width: 1000px) { html .navigation { width: 100% !important; margin-top: 2% !important } }

@media (max-width: 550px) { html .header-area { height: 100vh } html .navigation { height: 100vh; width: 89% !important; margin-top: 0 !important } html .navigation-list { height: 80%; -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } html .navigation-list #project-list-item { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; -webkit-box-flex: 0; -ms-flex: 0 1 100%; flex: 0 1 100% } html .navigation-list #parts-list-item { -webkit-box-flex: 0; -ms-flex: 0 1 33%; flex: 0 1 33%; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3 } html .navigation-list #notebook-list-item { -webkit-box-flex: 0; -ms-flex: 0 1 100%; flex: 0 1 100%; -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5 } html .navigation-list #hp-list-item { -webkit-box-flex: 0; -ms-flex: 0 1 33%; flex: 0 1 33%; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2 } html .navigation-list #hp-list-item .navigation-list-item-anchor { -ms-flex-line-pack: end !important; align-content: flex-end !important } html .navigation-list #team-list-item { -webkit-box-flex: 0; -ms-flex: 0 1 33%; flex: 0 1 33%; -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4 } html .navigation-list #team-list-item .navigation-list-item-anchor { -ms-flex-line-pack: start !important; align-content: flex-start !important } html .navigation-list .navigation-list-item .navigation-list-item-anchor { -ms-flex-line-pack: center !important; align-content: center !important; font-family: "FuturaPTLight", "sans-serif" } html .navigation-list .navigation-list-item .navigation-list-item-anchor .image-container { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2 } html .navigation-list .navigation-list-item .navigation-list-item-anchor .image-container .image-logo { width: 3.88em !important } html .navigation-list .navigation-list-item .navigation-list-item-anchor .image-logo-text { font-size: 1.4em !important; white-space: normal !important } html .navigation-list .navigation-list-item-anchor:first-child { -ms-flex-line-pack: center; align-content: center } html .main-content-container { display: none } }

html .invert-box { bottom: 30px; right: 10%; position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: 600; -webkit-transition: -webkit-transform .3s linear; transition: -webkit-transform .3s linear; -o-transition: transform .3s linear; transition: transform .3s linear; transition: transform .3s linear, -webkit-transform .3s linear }

html .invert-box img { width: 3em }

html .invert-box .invert-text { display: block }

html .invert-box:hover { -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3) }

html .invert-box__image { width: 5em; height: 5em }

html .invert-box__invert-text { font-size: 1.3em; display: block; padding: .5em 0; text-align: center }

html .hexagon { -webkit-box-flex: 3; -ms-flex: 3; flex: 3;

       margin-left: 10%;

width: 50vw; height: 70vh }

html .hexagon .liposome-container { position: relative }

html .hexagon video { position: absolute; top: 3vw; left: 5vw; display: inline-block; width: 55%; height: auto; z-index: 1 }

html .hexagon .static-image { position: absolute; top: 3vw; left: 5vw; display: inline-block; width: 55%; height: auto }

@media only screen and (max-width: 1400px) { html .hexagon video { width: 70%; left: 3vw } html .hexagon .static-image { width: 70%; left: 3vw } }

html .sub-menu { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; position: relative; font-size: 1.35rem; font-weight: 600; height: 70vh }

html .sub-menu ul { width: 20vw; top: 20vh; position: absolute; visibility: hidden; -webkit-transform: translateY(30vh); -ms-transform: translateY(30vh); transform: translateY(30vh); opacity: 0 }

html .sub-menu ul li { padding: .25em 0em }

html .main-content-container { display: -webkit-box; display: -ms-flexbox; display: flex; width: 80% }

@media (max-width: 856px) { html .image-logo-text { font-size: .9em !important } html .sub-menu { font-size: .9rem } }

@media (max-width: 550px) { html .main-content-container { display: none } }