Template:Tartu TUIT/style

@import url("https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i"); @import url("https://use.fontawesome.com/releases/v5.4.1/css/all.css"); html, body {

 font-family: 'Roboto';
 margin: 0;
 padding: 0; }

header, footer, nav {

 display: block; }

div, a, ul, li, header, footer, nav, section {

 box-sizing: border-box; }

a {

 cursor: pointer; }

.cols::after, .header::after, #process .content::after, #molecule .map .card::after, .notebook .images-two::after, .notebook .images-height::after, .notebook .event .details::after {

 content: ;
 display: table;
 clear: both; }

.cols, .header .menu, .header .menu .submenu {

 list-style-type: none;
 padding: 0;
 margin: 0; }

.cols > li {

 float: left; }

.content {

 margin: 0 auto; }

.narrow .content {

 width: 768px; }

.cols {

 margin: 0 -2%; }
 .cols.inset {
   margin: 0 2%; }
 .cols .col {
   float: left;
   margin: 0 2%; }
   .cols .col img {
     max-width: 100%; }
 .cols .col.half {
   width: 46%; }
 .cols .col.third {
   width: 29.3%; }
 .cols .col.two-thirds {
   width: 62.6%; }
 .cols .col.quarter {
   width: 21%; }
 .cols .col.five-twelfth {
   width: 37.6%; }

html, body {

 font-family: 'Roboto';
 font-size: 16px;
 background-color: #181e33;
 min-height: 100%; }

h2 {

 text-align: center;
 font-weight: 100;
 font-size: 36px; }

.banner {

 padding: 20px 0 0; }
 .banner .title {
   padding: 30px;
   font-size: 100px;
   font-weight: 100;
   color: #dde5ee;
   text-align: center; }
 @media (max-width: 1024px) {
   .banner {
     padding-top: 50px; }
     .banner .title {
       font-size: 60px; } }

.article {

 color: #dde5ee;
 padding-bottom: 60px;
 font-size: 18px; }
 .article p, .article li {
   text-align: justify; }
 .article h2, .article p {
   margin: 0; }
 .article h2, .article p, .article ol, .article ul {
   margin-top: 0;
   margin-bottom: 0;
   padding: 0 0 30px; }
 .article h2 {
   padding-top: 20px; }
 .article h3 {
   text-align: center; }
 .article a {
   color: #50b1be;
   text-decoration: none; }
 .article a.reference {
   font-size: 12px;
   vertical-align: super;
   padding: 0px 0px; }
 .article ol.fancy {
   list-style-type: none;
   counter-reset: ol-counter; }
   .article ol.fancy li {
     counter-increment: ol-counter; }
     .article ol.fancy li::before {
       box-shadow: 0 0 5px #50b1be;
       content: counter(ol-counter);
       background-color: #75c2cc;
       border-radius: 100%;
       color: #181e33;
       font-weight: 900;
       padding: 3px 8px 2px;
       line-height: 20px;
       margin: 4px 10px 4px 0;
       float: left; }
     .article ol.fancy li::after {
       content: ;
       clear: both;
       display: table; }
 .article .references {
   padding-left: 18px; }
   .article .references li {
     padding-left: 10px; }

.hr {

 width: 100%;
 height: 1px;
 background-color: #dde5ee;
 margin: 30px 0; }

.figure {

 width: 100%;
 padding-bottom: 30px; }
 .figure img {
   width: 100%; }
 .figure .caption {
   padding: 3px 0;
   font-size: 14px;
   text-align: center; }

.col .figure {

 padding-bottom: 0; }

.text-glow-red {

 text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ea2d30, 0 0 35px #ea2d30, 0 0 40px #ea2d30, 0 0 50px #ea2d30, 0 0 75px #ea2d30; }

.text-glow-blue {

 text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #50b1be, 0 0 35px #50b1be, 0 0 40px #50b1be, 0 0 50px #50b1be, 0 0 75px #50b1be; }

.card {

 background-color: #181e33;
 color: #dde5ee; }

.header {

 background-color: #181e33;
 display: block;
 height: 80px;
 color: #dde5ee;
 width: 100%;
 position: relative;
 z-index: 200; }
 .header .logo {
   background-color: #181e33;
   display: block;
   position: absolute;
   transform: translate(-50%, 0);
   left: 50%;
   text-decoration: none;
   padding: 7px;
   height: 80px; }
   .header .logo img {
     height: 100%;
     width: auto; }
 .header .menu li {
   cursor: default;
   white-space: nowrap; }
 .header .menu > li {
   position: relative; }
 .header .menu .submenu {
   display: none; }
   .header .menu .submenu a {
     display: block; }
 .header .nav-button {
   display: none;
   height: 80px;
   left: 0;
   padding: 10px;
   position: absolute;
   top: 0;
   width: 80px; }
   .header .nav-button i {
     background-color: #dde5ee;
     height: 2px;
     left: 50%;
     margin-left: -15px;
     margin-top: -1px;
     position: absolute;
     top: 50%;
     transition: background-color 0.3s 0s;
     width: 30px; }
     .header .nav-button i::before, .header .nav-button i::after {
       background-color: #dde5ee;
       backface-visibility: hidden;
       content: ;
       height: 100%;
       position: absolute;
       transform: translateZ(0);
       transition: transform 0.3s 0s;
       width: 100%; }
     .header .nav-button i::before {
       transform: translateY(-8px); }
     .header .nav-button i::after {
       transform: translateY(8px); }
 .header.sticky {
   position: fixed;
   top: 0;
   z-index: 500;
   width: 100%;
   background-color: #181e33;
   box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #50b1be, 0 0 20px #50b1be, 0 0 35px #50b1be, 0 0 40px #50b1be; }

.header-bottom {

 height: 49px; }

@media (min-width: 769px) {

 .header .navigation {
   position: relative;
   z-index: 200;
   width: 768px;
   margin: 0 auto;
   font-size: 18px;
   font-weight: 400; }
 .header .menu {
   width: 40%; }
   .header .menu > li {
     float: left;
     height: 80px; }
     .header .menu > li > span {
       color: #dde5ee;
       line-height: 80px;
       padding: 0px 20px; }
     .header .menu > li .submenu {
       position: absolute;
       top: 80px;
       background-color: #181e33;
       box-shadow: 0 5px 5px -5px #fff, 0 10px 10px -10px #50b1be, 0 15px 15px -15px #50b1be, 0 17px 17px -17px #50b1be, 0 30px 30px -30px #50b1be;
       border-top: 2px solid #50b1be;
       z-index: -1;
       min-width: 200px; }
       .header .menu > li .submenu a {
         color: #dde5ee;
         padding: 15px 20px;
         text-decoration: none; }
         .header .menu > li .submenu a:hover {
           background-color: rgba(80, 177, 190, 0.1); }
     .header .menu > li:hover {
       background-color: rgba(80, 177, 190, 0.1); }
       .header .menu > li:hover .submenu {
         display: block; }
 .header .menu-left {
   float: left; }
   .header .menu-left .submenu {
     left: 0; }
 .header .menu-right {
   float: right; }
   .header .menu-right > li {
     float: right; }
   .header .menu-right .submenu {
     right: 0; } }

@media (max-width: 768px) {

 .header .nav-button {
   display: block; }
 .header .navigation {
   background-color: #181e33;
   border-top: 2px solid #50b1be;
   max-height: 100%;
   min-width: 280px;
   color: white;
   opacity: 0;
   overflow: auto;
   bottom: 0px;
   top: 80px;
   left: 0;
   transform: translateX(-100%);
   transition: transform 0.3s 0s, opacity 0.3s 0s;
   position: fixed;
   width: auto;
   z-index: 100;
   padding-top: 10px; }
 .header .menu > li > span {
   padding: 0 20px;
   line-height: 60px;
   display: block; }
 .header .menu .submenu {
   background-color: rgba(80, 177, 190, 0.1); }
   .header .menu .submenu a {
     padding: 0 30px;
     line-height: 60px;
     color: #dde5ee; }
 .header .menu .menu-item-branch .label::before {
   content: '+';
   padding-right: 10px; }
 .header .menu .menu-item-branch.open .label::before {
   content: '-'; }
 .header .menu .menu-item-branch.open .submenu {
   display: block; }
 .nav-shown {
   overflow: hidden; }
   .nav-shown::before {
     background-color: rgba(0, 0, 0, 0.5);
     bottom: 0px;
     content: ;
     display: block;
     left: 0px;
     position: fixed;
     right: 0px;
     top: 0px;
     z-index: 1; }
   .nav-shown .navigation {
     opacity: 1;
     transform: translateX(0); }
   .nav-shown .nav-button i {
     background-color: transparent; }
   .nav-shown .nav-button i::before {
     transform: translateY(0) rotate(-45deg); }
   .nav-shown .nav-button i::after {
     transform: translateY(0) rotate(45deg); } }

1. footer {

 border-top: 1px solid #50b1be;
 padding: 20px 0; }
 #footer h3 {
   color: #dde5ee;
   text-align: center;
   font-size: 20px; }
 #footer .logos {
   padding: 0;
   margin: 0 auto;
   display: table;
   text-align: center; }
   #footer .logos li {
     display: inline-block;
     padding: 5px; }
     #footer .logos li img {
       height: 80px;
       background-color: white;
       opacity: 0.9; }

.scene {

 position: relative;
 width: 100%;
 overflow: hidden; }
 .scene .layer {
   display: none;
   height: 100%;
   position: absolute;
   width: 100%; }
 .scene .layer-paralax {
   transform: translate3d(0px, 0px, 0px); }
 .scene .layer-split-paralax .split-left, .scene .layer-split-paralax .split-right {
   background-repeat: no-repeat;
   background-origin: border-box;
   height: 100%;
   position: absolute;
   background-position-x: 0%;
   overflow: hidden; }
 .scene .layer-split-paralax .split-left {
   left: 0;
   right: 50%; }
 .scene .layer-split-paralax .split-right {
   left: 50%;
   right: 0;
   filter: grayscale(100%); }

1. reef-section {

 position: relative; }
 #reef-section .content {
   max-width: 1920px; }
 #reef-section #reef-card {
   box-shadow: 0 0 5px #fff, 0 0 10px #ea2d30, 0 0 15px #ea2d30, 0 0 17px #ea2d30, 0 0 30px #ea2d30;
   background-color: #171d31;
   color: #dde5ee;
   border-top-right-radius: 100px;
   font-size: 18px;
   font-weight: 300;
   position: relative;
   width: 55%;
   top: -150px;
   left: 5%;
   padding: 40px; }
   @media (min-width: 1366px) and (max-width: 1599px) {
     #reef-section #reef-card {
       top: -100px; } }
   @media (min-width: 1024px) and (max-width: 1366px) {
     #reef-section #reef-card {
       top: -80px;
       width: 70%; } }
   @media (max-width: 1024px) {
     #reef-section #reef-card {
       position: static;
       border-top-right-radius: 0px;
       border-bottom-right-radius: 100px;
       width: 100%; } }

@keyframes pulse {

 from {
   box-shadow: none; }
 to {
   box-shadow: 0 0 5px #fff, 0 0 10px #50b1be, 0 0 15px #50b1be, 0 0 17px #50b1be, 0 0 30px #50b1be, 0 0 50px #50b1be, 0 0 75px #50b1be, 0 0 5px #fff inset, 0 0 10px #50b1be inset, 0 0 15px #50b1be inset, 0 0 17px #50b1be inset, 0 0 30px #50b1be inset; } }

@keyframes slideInUp {

 from {
   transform: translate3d(0, 100%, 0);
   opacity: 0.5; }
 to {
   transform: translate3d(0, 0%, 0); } }

.slide-in-up {

 animation: 1s ease-out 0s slideInUp;
 animation-fill-mode: backwards; }

1. reef {

 height: 800px; }
 #reef .spinner {
   animation: pulse 2s ease-out 0s infinite alternate;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 70px;
   height: 70px;
   border-radius: 100%;
   border: 1px solid #dde5ee;
   background-color: transparent; }
 #reef #reef-bg {
   top: 0px; }
   #reef #reef-bg .split-right, #reef #reef-bg .split-left {
     background-image: url(layer-bg.png); }
 #reef #reef-corals-first {
   top: 0px; }
   #reef #reef-corals-first .split-right, #reef #reef-corals-first .split-left {
     background-image: url(layer-first.png); }
 #reef #reef-corals-second {
   top: 0px; }
   #reef #reef-corals-second .split-left, #reef #reef-corals-second .split-right {
     background-image: url(layer-second.png); }
 #reef #reef-corals-third {
   bottom: 0px; }
   #reef #reef-corals-third .split-left, #reef #reef-corals-third .split-right {
     background-image: url(layer-third.png); }
 #reef #reef-corals-zero {
   bottom: 0px; }
   #reef #reef-corals-zero .split-left, #reef #reef-corals-zero .split-right {
     background-image: url(layer-zero.png); }
   #reef #reef-corals-zero .split-right {
     filter: none;
     background-image: url(layer-zero-after.png); }

1. process {

 padding-top: 40px;
 padding-bottom: 40px; }
 #process .content {
   margin: 0 auto;
   max-width: 1400px; }
 #process img {
   float: left;
   width: 47%; }
 #process .card {
   border-top-right-radius: 100px;
   background-color: #171d31;
   float: right;
   box-shadow: 0 0 5px #fff, 0 0 10px #50b1be, 0 0 15px #50b1be, 0 0 17px #50b1be, 0 0 30px #50b1be;
   font-size: 18px;
   font-weight: 300;
   width: 43%;
   margin-right: 5%;
   margin-top: 5%;
   padding: 40px; }
 @media (max-width: 1366px) {
   #process {
     padding-top: 80px; }
     #process .card {
       margin-top: 0; } }
 @media (max-width: 1024px) {
   #process img {
     background-color: #181e33;
     box-sizing: border-box;
     float: none;
     width: 100%;
     padding: 0 20px; }
   #process .card {
     float: none;
     width: 100%;
     border-top-right-radius: 0px;
     border-bottom-right-radius: 100px; } }

1. molecule {

 padding: 0px 20px; }
 #molecule .content {
   max-width: 1366px; }
 #molecule .map {
   position: relative;
   margin: 0 auto 100px; }
   #molecule .map .background {
     background-image: url(molecule.png);
     background-size: 100%;
     position: relative;
     width: 100%;
     height: 100%;
     z-index: 20; }
   #molecule .map .fog {
     background-color: rgba(24, 30, 51, 0.5);
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 30; }
   #molecule .map .pin {
     position: absolute;
     z-index: 30;
     border-radius: 100%;
     border: 3px solid #ea2d30; }
     #molecule .map .pin .icon {
       width: 100%;
       height: 100%;
       background-size: 100%;
       filter: saturate(0%);
       position: relative;
       z-index: 25; }
     #molecule .map .pin:hover {
       box-shadow: 0 0 5px #fff, 0 0 10px #ea2d30, 0 0 15px #ea2d30, 0 0 17px #ea2d30, 0 0 30px #ea2d30; }
   #molecule .map .card {
     display: none;
     position: absolute;
     box-shadow: 0 0 5px #fff, 0 0 10px #ea2d30, 0 0 15px #ea2d30, 0 0 17px #ea2d30, 0 0 30px #ea2d30;
     background-color: #181e33;
     top: 50%;
     left: 50%;
     z-index: 50;
     border-radius: 170px 0px 0px 0px;
     min-width: 800px;
     transform: translate(-50%, -50%);
     font-size: 20px;
     font-weight: 300; }
     #molecule .map .card .btn-close {
       position: absolute;
       right: 10px;
       top: 10px;
       width: 40px;
       height: 40px; }
       #molecule .map .card .btn-close::before, #molecule .map .card .btn-close::after {
         background-color: #dde5ee;
         backface-visibility: hidden;
         content: ;
         height: 2px;
         position: absolute;
         top: 50%;
         width: 100%; }
       #molecule .map .card .btn-close::before {
         transform: rotate(45deg); }
       #molecule .map .card .btn-close::after {
         transform: rotate(-45deg); }
     #molecule .map .card .picture {
       float: left;
       padding: 20px; }
       #molecule .map .card .picture img {
         width: 300px;
         border-radius: 100%; }
     #molecule .map .card .details {
       overflow: hidden;
       padding: 20px 20px; }
       #molecule .map .card .details .name {
         font-size: 30px;
         font-weight: 300; }
       #molecule .map .card .details .country, #molecule .map .card .details .superpower, #molecule .map .card .details .role, #molecule .map .card .details .element {
         padding: 5px 0; }
         #molecule .map .card .details .country::before, #molecule .map .card .details .superpower::before, #molecule .map .card .details .role::before, #molecule .map .card .details .element::before {
           color: #96999c; }
       #molecule .map .card .details .country::before {
         content: "From: "; }
       #molecule .map .card .details .role::before {
         content: "Occupation: "; }
       #molecule .map .card .details .superpower::before {
         content: "Superpower: "; }
       #molecule .map .card .details .element::before {
         content: "Element: "; }
       #molecule .map .card .details .periodic {
         border: 1px solid #ea2d30;
         padding: 5px;
         float: right;
         margin-top: 10px; }
         #molecule .map .card .details .periodic .mass {
           float: left;
           font-size: 12px;
           font-weight: 400;
           padding: 2px; }
         #molecule .map .card .details .periodic .number {
           float: right;
           margin-left: 10px; }
         #molecule .map .card .details .periodic .short {
           display: block;
           clear: both;
           text-align: center;
           font-size: 25px;
           font-weight: 900; }
         #molecule .map .card .details .periodic .full {
           text-align: center;
           font-size: 16px; }
       #molecule .map .card .details .compound {
         margin-top: 10px;
         border: 1px solid #ea2d30;
         padding: 10px;
         float: right;
         text-align: center;
         font-size: 25px;
         font-weight: 900; }

.notebook {

 color: #dde5ee;
 margin-top: 100px; }
 .notebook p, .notebook h3 {
   margin: 0; }
 .notebook h3 {
   padding-bottom: 15px;
   font-size: 22px;
   margin-top: -5px; }
 .notebook p {
   padding-bottom: 10px;
   text-align: justify; }
 .notebook img {
   box-sizing: border-box;
   float: left;
   max-width: 50%;
   max-height: 500px;
   border: 1px solid #181e33;
   padding: 5px;
   background-color: #dde5ee;
   margin-right: 20px; }
 .notebook .images-two img {
   max-width: 50%; }
 .notebook .images-height img {
   height: 100%; }
 .notebook .event {
   width: 1000px;
   margin: 0 auto;
   position: relative; }
   .notebook .event .details {
     margin-left: 25%;
     padding-left: 20px;
     padding: 0px 20px 60px 40px; }
   .notebook .event .bullet {
     width: 20px;
     height: 20px;
     position: absolute;
     background-color: white;
     border-radius: 10px;
     top: 0px;
     left: 25%;
     transform: translate(-9px, 1px); }
   .notebook .event .side {
     position: absolute;
     width: 25%;
     left: 0;
     top: 0;
     text-align: right;
     padding: 3px 30px; }
     .notebook .event .side .icon {
       font-size: 30px;
       padding: 20px 0px; }
     .notebook .event .side .fa-plane {
       transform: rotate(-45deg); }

.notebook-red a {

 color: #ea2d30; }

.notebook-red .details {

 margin-left: 25%;
 padding-left: 20px;
 border-left: 3px solid #ea2d30; }

.notebook-red .bullet {

 box-shadow: 0 0 5px #fff, 0 0 10px #ea2d30, 0 0 15px #ea2d30, 0 0 17px #ea2d30, 0 0 30px #ea2d30; }