/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 10 version
*/

@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
@import url('https://use.typekit.net/kgq7fcs.css');

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-360deg);
                transform: rotate(-360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-360deg);
                transform: rotate(-360deg);
    }
}

@-webkit-keyframes load {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

@keyframes load {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

@-webkit-keyframes spin-centered {
    0% {
        -webkit-transform: translate(-50%,-50%) rotate(0deg);
                transform: translate(-50%,-50%) rotate(0deg);
    }
    100% {
        -webkit-transform: translate(-50%,-50%) rotate(-360deg);
                transform: translate(-50%,-50%) rotate(-360deg);
    }
}

@keyframes spin-centered {
    0% {
        -webkit-transform: translate(-50%,-50%) rotate(0deg);
                transform: translate(-50%,-50%) rotate(0deg);
    }
    100% {
        -webkit-transform: translate(-50%,-50%) rotate(-360deg);
                transform: translate(-50%,-50%) rotate(-360deg);
    }
}

@-webkit-keyframes spin-backwards {
    0% {
        -webkit-transform: translate(-50%,-50%) rotate(0deg);
                transform: translate(-50%,-50%) rotate(0deg);
    }
    100% {
        -webkit-transform: translate(-50%,-50%) rotate(360deg);
                transform: translate(-50%,-50%) rotate(360deg);
    }
}

@keyframes spin-backwards {
    0% {
        -webkit-transform: translate(-50%,-50%) rotate(0deg);
                transform: translate(-50%,-50%) rotate(0deg);
    }
    100% {
        -webkit-transform: translate(-50%,-50%) rotate(360deg);
                transform: translate(-50%,-50%) rotate(360deg);
    }
}

@-webkit-keyframes spin-tilted {
    0% {
        -webkit-transform: rotateX(-75deg) translate3d(-50%,0,0) rotateZ(0deg);
                transform: rotateX(-75deg) translate3d(-50%,0,0) rotateZ(0deg);
    }
    100% {
        -webkit-transform: rotateX(-75deg) translate3d(-50%,0,0) rotateZ(360deg);
                transform: rotateX(-75deg) translate3d(-50%,0,0) rotateZ(360deg);
    }
}

@keyframes spin-tilted {
    0% {
        -webkit-transform: rotateX(-75deg) translate3d(-50%,0,0) rotateZ(0deg);
                transform: rotateX(-75deg) translate3d(-50%,0,0) rotateZ(0deg);
    }
    100% {
        -webkit-transform: rotateX(-75deg) translate3d(-50%,0,0) rotateZ(360deg);
                transform: rotateX(-75deg) translate3d(-50%,0,0) rotateZ(360deg);
    }
}


@-webkit-keyframes fly {
    0% {
        -webkit-transform: translate(-120vh,-40%) rotateX(0deg) rotateY(0deg);
                transform: translate(-120vh,-40%) rotateX(0deg) rotateY(0deg);
        z-index: 0;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    45% {
        -webkit-transform: translate(55vh,-50%) rotateX(-15deg) rotateY(0deg);
                transform: translate(55vh,-50%) rotateX(-15deg) rotateY(0deg);
        z-index: 0;
        opacity: 1;
    }
    50% {
        -webkit-transform: translate(60vh,-50%) rotateX(-15deg) rotateY(90deg);
                transform: translate(60vh,-50%) rotateX(-15deg) rotateY(90deg);
        z-index: -1;
        opacity: 1;
    }
    55% {
        -webkit-transform: translate(55vh,-50%) rotateX(-15deg) rotateY(180deg);
                transform: translate(55vh,-50%) rotateX(-15deg) rotateY(180deg);
        z-index: -1;
        opacity: 1;
    }
    100% {
        -webkit-transform: translate(-120vh,-60%) rotateX(15deg) rotateY(180deg);
                transform: translate(-120vh,-60%) rotateX(15deg) rotateY(180deg);
        z-index: -1;
        opacity: 0;
    }
}


@keyframes fly {
    0% {
        -webkit-transform: translate(-120vh,-40%) rotateX(0deg) rotateY(0deg);
                transform: translate(-120vh,-40%) rotateX(0deg) rotateY(0deg);
        z-index: 0;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    45% {
        -webkit-transform: translate(55vh,-50%) rotateX(-15deg) rotateY(0deg);
                transform: translate(55vh,-50%) rotateX(-15deg) rotateY(0deg);
        z-index: 0;
        opacity: 1;
    }
    50% {
        -webkit-transform: translate(60vh,-50%) rotateX(-15deg) rotateY(90deg);
                transform: translate(60vh,-50%) rotateX(-15deg) rotateY(90deg);
        z-index: -1;
        opacity: 1;
    }
    55% {
        -webkit-transform: translate(55vh,-50%) rotateX(-15deg) rotateY(180deg);
                transform: translate(55vh,-50%) rotateX(-15deg) rotateY(180deg);
        z-index: -1;
        opacity: 1;
    }
    100% {
        -webkit-transform: translate(-120vh,-60%) rotateX(15deg) rotateY(180deg);
                transform: translate(-120vh,-60%) rotateX(15deg) rotateY(180deg);
        z-index: -1;
        opacity: 0;
    }
}

@-webkit-keyframes shine {
    0% {
        color: white;
        -webkit-transform: translate(-50%,-50%) scale(.1) rotateZ(45deg);
                transform: translate(-50%,-50%) scale(.1) rotateZ(45deg);
        opacity: 0;
    }
    10% {
        color: red;
        opacity: 1;
    }
    20% {
        color: green;
        opacity: 1;
    }
    30% {
        color: blue;
        opacity: 1;
    }
    40% {
        color: black;
        -webkit-transform: translate(-50%,-50%) scale(1) rotateZ(0);
                transform: translate(-50%,-50%) scale(1) rotateZ(0);
        opacity: 1;
        
    }
}

@keyframes shine {
    0% {
        color: white;
        -webkit-transform: translate(-50%,-50%) scale(.1) rotateZ(45deg);
                transform: translate(-50%,-50%) scale(.1) rotateZ(45deg);
        opacity: 0;
    }
    10% {
        color: red;
        opacity: 1;
    }
    20% {
        color: green;
        opacity: 1;
    }
    30% {
        color: blue;
        opacity: 1;
    }
    40% {
        color: black;
        -webkit-transform: translate(-50%,-50%) scale(1) rotateZ(0);
                transform: translate(-50%,-50%) scale(1) rotateZ(0);
        opacity: 1;
        
    }
}

@-webkit-keyframes orbit {

    0% {
      -webkit-transform: translate(-50%,-50%) rotateZ(0deg);
              transform: translate(-50%,-50%) rotateZ(0deg);
    }
  
    100% {
      -webkit-transform: translate(-50%,-50%) rotateZ(-360deg);
              transform: translate(-50%,-50%) rotateZ(-360deg);
    }
  
  }

@keyframes orbit {

    0% {
      -webkit-transform: translate(-50%,-50%) rotateZ(0deg);
              transform: translate(-50%,-50%) rotateZ(0deg);
    }
  
    100% {
      -webkit-transform: translate(-50%,-50%) rotateZ(-360deg);
              transform: translate(-50%,-50%) rotateZ(-360deg);
    }
  
  }
  
  @-webkit-keyframes orbit-inverse {
  
    0% {
      -webkit-transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg);
              transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg);
    }
  
    100% {
      -webkit-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
              transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
    }
  
  }
  
  @keyframes orbit-inverse {
  
    0% {
      -webkit-transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg);
              transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg);
    }
  
    100% {
      -webkit-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
              transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
    }
  
  }
  

@-webkit-keyframes appear-hoz-centered {

    0% {
      -webkit-transform: translate(0,0) scale(0) rotateY(90deg);
              transform: translate(0,0) scale(0) rotateY(90deg);
      opacity: 0;
    }
  
    100% {
      -webkit-transform: translate(-50%,0) scale(1) rotateY(0deg);
              transform: translate(-50%,0) scale(1) rotateY(0deg);
      opacity: 1;
    }
  
}
  

@keyframes appear-hoz-centered {

    0% {
      -webkit-transform: translate(0,0) scale(0) rotateY(90deg);
              transform: translate(0,0) scale(0) rotateY(90deg);
      opacity: 0;
    }
  
    100% {
      -webkit-transform: translate(-50%,0) scale(1) rotateY(0deg);
              transform: translate(-50%,0) scale(1) rotateY(0deg);
      opacity: 1;
    }
  
}

@-webkit-keyframes appear {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes appear {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes temporary {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes temporary {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes reveal {
    0% {
        -webkit-clip-path: rect(0 0 100% 0);
                clip-path: rect(0 0 100% 0);
    }
    20% {
        -webkit-clip-path: rect(0 100% 100% 0);
                clip-path: rect(0 100% 100% 0);
        
    }
    80% {
        -webkit-clip-path: rect(0 100% 100% 0);
                clip-path: rect(0 100% 100% 0);
        
    }
    100% {
        -webkit-clip-path: rect(0 100% 100% 100%);
                clip-path: rect(0 100% 100% 100%);
        
    }
}

@keyframes reveal {
    0% {
        -webkit-clip-path: rect(0 0 100% 0);
                clip-path: rect(0 0 100% 0);
    }
    20% {
        -webkit-clip-path: rect(0 100% 100% 0);
                clip-path: rect(0 100% 100% 0);
        
    }
    80% {
        -webkit-clip-path: rect(0 100% 100% 0);
                clip-path: rect(0 100% 100% 0);
        
    }
    100% {
        -webkit-clip-path: rect(0 100% 100% 100%);
                clip-path: rect(0 100% 100% 100%);
        
    }
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes disappear {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        left: 30%;
    }
}

@keyframes disappear {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        left: 30%;
    }
}

.disappearing {
    -webkit-animation: disappear 1s 1;
            animation: disappear 1s 1;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

html, body {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

:focus {
    outline: none;
}

img {
    max-width: 90%;
}

body {
    font-family: "new-order", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    color: #262262;
}

.material-icons {
    font-size: inherit;
    cursor: pointer;
}

#primary-nav {
    vertical-align: middle;
    padding: 0 5px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.5);
    z-index: 100;
}

.st {
	text-decoration: line-through;
	color: red;
}

.green {
	color: green;
}

#cookies {
	position: absolute;
	bottom: 0;
	right: 50%;
	pointer-events: none;
}

.cookie {
	vertical-align: middle;
	display: inline-block;
	-webkit-animation: spin 2s infinite linear;
	animation: spin 2s infinite linear;
}

#cookie-notice {
	opacity: 0;
	cursor: pointer;
	-webkit-animation: fade-in 5s 1;
	animation: fade-in 5s 1;
	-webkit-animation-delay: 10s;
	animation-delay: 10s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	position: fixed;
	bottom: 5px;
	text-align: center;
	left: 10%;
	right: 10%;
	z-index: 99999;
	font-size: 50%;
}

#main-menu a {
    display: block;
    padding: 3px 5px;
    cursor: pointer;
    white-space: nowrap;
    margin: 2px 0;
}

a:before, button:before, .loading:after {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
    margin-right: 5px;
    vertical-align: middle;

}

#main-menu a.contact:before {
    content: 'send';
}

#main-menu a.plans:before {
    content: 'difference';
}

#main-menu a.academy:before {
    content: 'school';
}

#main-menu a.about:before {
    content: 'help';
}

#main-menu a.youtube:before {
    content: 'play_arrow';
}

#main-menu a.close {
    padding: 0;
    margin: 0;
}

.window a:hover, .window a:focus {
    color: #0db1e7;
}

.window a.button:hover {
	color: white;
	background: #0db1e7;
}

.window a.close {
    position: absolute;
    top: 3px;
    right: 0;
    padding: 0;
    margin: 0;
}

.window a.close:before {
    content: 'close';
}


.modal .window {
    border: 1px solid #262262;
    border-radius: 5px;
    position: absolute;
    top: 20%;
    left: 50%;
    -webkit-transform: translate(-50%,0);
        -ms-transform: translate(-50%,0);
            transform: translate(-50%,0);
    max-width: 80%;
    max-height: 60%;
	min-width: 200px;
    overflow: auto;
    background: white;
    -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,.5);
            box-shadow: 5px 5px 5px rgba(0,0,0,.5);
    padding-bottom: 5px;
    z-index: 101;
    -webkit-animation: appear-hoz-centered 1s 1;
            animation: appear-hoz-centered 1s 1;
}

.modal .window.loading {
    overflow: hidden;
}

.modal .window.loading * {
    display: none;
}

.modal .window.loading:after {
    content: 'autorenew';
    font-size: 100px;
    -webkit-animation: load 2s infinite linear;
            animation: load 2s infinite linear;
    display: inline-block !important;
}

.modal .window.loading h3,.modal .window.loading h4 {
    display: block;
}

.temp {
    opacity: 0;
    -webkit-animation: temporary 10s 1;
            animation: temporary 10s 1;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

.window h3, .window h4 {
    color: white;
    background: #262262;
    margin: 0 0 5px 0;
    padding: 3px 50px 3px 5px;
    vertical-align: middle;
}

.window p {
    margin: .5em;
    margin: .5rem;
}

.window h3 img, .window h4 img, .button img, button img {
    width: 24px;
    margin-right: 5px;
    vertical-align: middle;
}

.error {
	color: #FF0000;
}

.mark, .logo {
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    height: 250px;
    max-width: none;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%,-50%,0);
            transform: translate3d(-50%,-50%,0);
}

.sun .mark {
    -webkit-transform: translate(-50%,-50%) rotateX(-75deg) translate3d(0,0,0);
            transform: translate(-50%,-50%) rotateX(-75deg) translate3d(0,0,0);
}

section {
    height: 100vh;
    position: relative;
    overflow: hidden;
}

section > p:before {
    -webkit-animation-delay: 4s;
            animation-delay: 4s;
}

section > p {
    position: absolute;
    top: 15%;
    left: 10%;
    right: 10%;
    text-align: center;
    -webkit-clip-path: rect(0 0 100% 0);
            clip-path: rect(0 0 100% 0);
    -webkit-animation: reveal 6s 1;
            animation: reveal 6s 1;
    -webkit-animation-delay: 4s;
            animation-delay: 4s;
    -webkit-animation-fill-mode:forwards;
            animation-fill-mode:forwards;
    z-index: 24;
    text-shadow: 1px 1px 0 white,
        -1px 1px 0 white,
        1px -1px 0 white,
        -1px -1px 0 white;
}

section h2, section h3 {
    text-align: center;
    padding: 0 25px;
    margin: 5% 0 0 0;
    position: relative;
    z-index: 25;
    text-shadow: 1px 1px 0 white,
        -1px 1px 0 white,
        1px -1px 0 white,
        -1px -1px 0 white;
    -webkit-clip-path: rect(0 0 100% 0);
            clip-path: rect(0 0 100% 0);
    
    -webkit-animation: reveal 8s 1;
    
            animation: reveal 8s 1;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

.fade-in {
    opacity: 0;
    -webkit-animation: fade-in 2s 1;
            animation: fade-in 2s 1;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

.sun {
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    font-size: 300%;
    -webkit-transform: rotateX(75deg) translate3d(0,0,0);
            transform: rotateX(75deg) translate3d(0,0,0);
    
}

.sun > span {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
  
.sun > div {
    width: 500px;
    height: 500px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;

    -webkit-transform-style: preserve-3d;

            transform-style: preserve-3d;
    -webkit-animation: orbit 15s infinite linear;
            animation: orbit 15s infinite linear;
}

.sun > div > span {
    pointer-events: auto;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;

  font-size: 50px;

  -webkit-transform-style: preserve-3d;

          transform-style: preserve-3d;
  -webkit-animation: orbit-inverse 15s infinite linear;
          animation: orbit-inverse 15s infinite linear;
}

.sun > div > span > span {
    opacity: 0;
    -webkit-animation: temporary 10s 1;
            animation: temporary 10s 1;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

.sun > div:nth-child(2), .sun > div:nth-child(2) > * {
    -webkit-animation-delay:-3s;
            animation-delay:-3s;
}

.sun > div:nth-child(3), .sun > div:nth-child(3) > * {
    -webkit-animation-delay:-6s;
            animation-delay:-6s;
}

.sun > div:nth-child(4), .sun > div:nth-child(4) > * {
    -webkit-animation-delay:-9s;
            animation-delay:-9s;
}

.sun > div:nth-child(5), .sun > div:nth-child(5) > * {
    -webkit-animation-delay:-12s;
            animation-delay:-12s;
}

form > div {
    margin: .5em;
}

input, textarea {
    border-radius: 5px;
    font: inherit;
    padding: .25em;
}

.shining.material-icons {
    font-size: 300%;
}

textarea {
    display: block;
    min-width: 95%;
	margin-right: .5em;
}

label {
    display: block;
    font-weight: bold;
}

button, .button {
    background: #262262;
    color: white;
    border-radius: 5px;
    padding: .25em .25em 1px .25em;
    vertical-align: middle;
    font: inherit;
    cursor: pointer;
    border: none;
    -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.5);
            box-shadow: 2px 2px 2px rgba(0,0,0,.5);
}

.button.yt {
	background: #f03;
}

.button.yt:hover {
	color: white;
	background: 
}

.button:before {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-moz-font-feature-settings: 'liga';
	-moz-osx-font-smoothing: grayscale;
	
}

.button.yt:before {
	content: 'play_arrow';
	margin-right: 2px;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    font-size: 400%;
    margin: 0;
    cursor: pointer;
}

.off-centered {
    position: absolute;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    font-size: 200%;
    left: 70%;
    margin: 0;
    cursor: pointer;
    color: white;
    -webkit-text-stroke: 1px black;
    -webkit-text-fill-color: white;
}

.spinning {
    -webkit-animation: spin 3s infinite linear;
            animation: spin 3s infinite linear;
}

.spinning.centered {
    font-size: 1000%;
    -webkit-animation: spin-centered 3s infinite linear;
            animation: spin-centered 3s infinite linear;
}

.spinning.off-centered {
    font-size: 500%;
    -webkit-animation: spin-centered 2s infinite linear;
            animation: spin-centered 2s infinite linear;
}

.appearing {
    opacity: 0;
    -webkit-animation: appear 3s 1 linear;
            animation: appear 3s 1 linear;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

.spinning.backwards {
    -webkit-animation: spin-backwards 2s infinite linear;
            animation: spin-backwards 2s infinite linear;
}

.boxes {
    position: absolute;
    top: 50%;
    left: 30%;
    -webkit-transform: translate(0,-50%);
        -ms-transform: translate(0,-50%);
            transform: translate(0,-50%);
}

.boxes > div {
    position: relative;
    font-size: 200%;
}

.boxes > div > span.appearing {
    position: absolute;
    top: 0;
    left: 0;
}

.flying {
    opacity: 0;
    -webkit-transform: translate(-120vh,-40%) rotate(0deg) rotateY(0deg);
            transform: translate(-120vh,-40%) rotate(0deg) rotateY(0deg);
    -webkit-animation: fly 3s infinite ease-in;
            animation: fly 3s infinite ease-in;
}

.shining {
    font-size: 100%;
    -webkit-animation: shine 5s 1 ease-in-out;
            animation: shine 5s 1 ease-in-out;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    opacity: 0;
    color: white;
    -webkit-transform: translate(-50%,-50%) scale(.1) rotateZ(45deg);
        -ms-transform: translate(-50%,-50%) scale(.1) rotate(45deg);
            transform: translate(-50%,-50%) scale(.1) rotateZ(45deg);
}


h3 {
    font-size: 200%;
}

th {
    padding: 5px;
    
}

th:first-child {
    text-align: right;
}

td {
    text-align: center;
}

.check {
    color: green;
}

.close {
    color: red;
}

footer {
    text-align: right;
    position: fixed;
    bottom: 5px;
    left: 10px;
    z-index: 9;
}

footer img {
    height: 50px;
    cursor: pointer;
}

@media (max-width: 800px) or (max-height: 500px) {

    section > p {
        top: auto;
        bottom: 5px;
    }

    footer {
        bottom: 2px;
        left: 5px;
    }

    footer img {
        height: 25px;
        cursor: pointer;
    }

    section h2, section h3 {
        margin: 2.5% 0 0 0;
    }

    .mark, .logo {
        vertical-align: middle;
        height: 200px;
    }

    .logo {
        max-width: 90%;
    }

    .sun > div {
        width: 300px;
        height: 300px;
    }

    .sun > div > span {
        font-size: 35px;
    }

    table {
        font-size: 70%;
    }

    .centered.material-icons {
        font-size: 400%;
    }

    .spinning.centered {
        font-size: 1000%;
    }

    .modal .window {
        top: 10%;
        max-height: 80%;
        max-width: 80%;
    }

    .boxes {
        top: 50%;
        left: 10%;
    }

    .off-centered {
        left: 85%;
    }

    label {
        width: auto;
    }
    
}

@media (max-width:400px) {
    @-webkit-keyframes fly {
        0% {
            -webkit-transform: translate(0vh,-40%) rotateX(0deg) rotateY(0deg);
                    transform: translate(0vh,-40%) rotateX(0deg) rotateY(0deg);
            z-index: 0;
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        45% {
            -webkit-transform: translate(55vh,-50%) rotateX(-15deg) rotateY(0deg);
                    transform: translate(55vh,-50%) rotateX(-15deg) rotateY(0deg);
            z-index: 0;
            opacity: 1;
        }
        50% {
            -webkit-transform: translate(60vh,-50%) rotateX(-15deg) rotateY(90deg);
                    transform: translate(60vh,-50%) rotateX(-15deg) rotateY(90deg);
            z-index: -1;
            opacity: 1;
        }
        55% {
            -webkit-transform: translate(55vh,-50%) rotateX(-15deg) rotateY(180deg);
                    transform: translate(55vh,-50%) rotateX(-15deg) rotateY(180deg);
            z-index: -1;
            opacity: 1;
        }
        100% {
            -webkit-transform: translate(0vh,-60%) rotateX(15deg) rotateY(180deg);
                    transform: translate(0vh,-60%) rotateX(15deg) rotateY(180deg);
            z-index: -1;
            opacity: 0;
        }
    }
    @keyframes fly {
        0% {
            -webkit-transform: translate(0vh,-40%) rotateX(0deg) rotateY(0deg);
                    transform: translate(0vh,-40%) rotateX(0deg) rotateY(0deg);
            z-index: 0;
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        45% {
            -webkit-transform: translate(55vh,-50%) rotateX(-15deg) rotateY(0deg);
                    transform: translate(55vh,-50%) rotateX(-15deg) rotateY(0deg);
            z-index: 0;
            opacity: 1;
        }
        50% {
            -webkit-transform: translate(60vh,-50%) rotateX(-15deg) rotateY(90deg);
                    transform: translate(60vh,-50%) rotateX(-15deg) rotateY(90deg);
            z-index: -1;
            opacity: 1;
        }
        55% {
            -webkit-transform: translate(55vh,-50%) rotateX(-15deg) rotateY(180deg);
                    transform: translate(55vh,-50%) rotateX(-15deg) rotateY(180deg);
            z-index: -1;
            opacity: 1;
        }
        100% {
            -webkit-transform: translate(0vh,-60%) rotateX(15deg) rotateY(180deg);
                    transform: translate(0vh,-60%) rotateX(15deg) rotateY(180deg);
            z-index: -1;
            opacity: 0;
        }
    }

    .flying {
        -webkit-transform: translate(0vh,-40%) rotate(0deg) rotateY(0deg);
                transform: translate(0vh,-40%) rotate(0deg) rotateY(0deg);
        -webkit-animation: fly 3s infinite ease-in;
                animation: fly 3s infinite ease-in;
    }
}