html, body {
font-family: 'Raleway', sans-serif;
padding: 1em 2em;
font-size: 18px;
color: #aaa
}
h1, h2 {
font-weight: 200;
margin: 0.4em 0;
}
h1 {
font-size: 3.5em;
}
h2 {
color: #fff;
font-size: 2em;
}
.center {
margin: auto;
padding: 10px;
text-align: center;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 260px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
opacity: 0;
transition: opacity 1s;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
/* 2d Transform */
.jello-horizontal:hover {
-webkit-animation: jello-horizontal 0.9s both;
animation: jello-horizontal 0.9s both;
}
@-webkit-keyframes jello-horizontal {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes jello-horizontal {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes move {
100% {
transform: translate3d(0, 0, 1px) rotate(360deg);
}
}
/* Animated Background */
@keyframes move {
100% {
transform: translate3d(0, 0, 1px) rotate(360deg);
}
}
.background {
position: fixed;
z-index: -1;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background: #222;
overflow: hidden;
}
.background span {
width: 8vmin;
height: 8vmin;
border-radius: 8vmin;
backface-visibility: hidden;
position: absolute;
animation: move;
animation-duration: 45;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.background span:nth-child(0) {
color: #E45A84;
top: 59%;
left: 56%;
animation-duration: 8s;
animation-delay: -15s;
transform-origin: -22vw 21vh;
box-shadow: 16vmin 0 2.5614527964041915vmin currentColor;
}
.background span:nth-child(1) {
color: #E45A84;
top: 86%;
left: 72%;
animation-duration: 18s;
animation-delay: -11s;
transform-origin: 6vw -21vh;
box-shadow: 16vmin 0 2.0182048722081825vmin currentColor;
}
.background span:nth-child(2) {
color: #FFACAC;
top: 19%;
left: 82%;
animation-duration: 37s;
animation-delay: -20s;
transform-origin: -18vw -10vh;
box-shadow: -16vmin 0 2.9277822409378276vmin currentColor;
}
.background span:nth-child(3) {
color: #E45A84;
top: 100%;
left: 15%;
animation-duration: 35s;
animation-delay: -5s;
transform-origin: -6vw -5vh;
box-shadow: -16vmin 0 2.771172879149598vmin currentColor;
}
.background span:nth-child(4) {
color: #FFACAC;
top: 7%;
left: 59%;
animation-duration: 43s;
animation-delay: -40s;
transform-origin: 19vw -11vh;
box-shadow: -16vmin 0 2.3962838366890047vmin currentColor;
}
.background span:nth-child(5) {
color: #583C87;
top: 16%;
left: 92%;
animation-duration: 31s;
animation-delay: -46s;
transform-origin: -16vw -5vh;
box-shadow: -16vmin 0 2.708043097335592vmin currentColor;
}
.background span:nth-child(6) {
color: #583C87;
top: 59%;
left: 82%;
animation-duration: 8s;
animation-delay: -2s;
transform-origin: 4vw -19vh;
box-shadow: -16vmin 0 2.105400274831958vmin currentColor;
}
.background span:nth-child(7) {
color: #E45A84;
top: 50%;
left: 23%;
animation-duration: 20s;
animation-delay: -23s;
transform-origin: -15vw 12vh;
box-shadow: -16vmin 0 2.5984178861225895vmin currentColor;
}
.background span:nth-child(8) {
color: #FFACAC;
top: 67%;
left: 44%;
animation-duration: 29s;
animation-delay: -50s;
transform-origin: 1vw -9vh;
box-shadow: 16vmin 0 2.9133547721769717vmin currentColor;
}
.background span:nth-child(9) {
color: #583C87;
top: 24%;
left: 3%;
animation-duration: 23s;
animation-delay: -25s;
transform-origin: -4vw -10vh;
box-shadow: -16vmin 0 2.7173712940606336vmin currentColor;
}
.background span:nth-child(10) {
color: #FFACAC;
top: 44%;
left: 23%;
animation-duration: 27s;
animation-delay: -30s;
transform-origin: 6vw -21vh;
box-shadow: -16vmin 0 2.471750133814427vmin currentColor;
}
.background span:nth-child(11) {
color: #E45A84;
top: 45%;
left: 84%;
animation-duration: 26s;
animation-delay: -2s;
transform-origin: 13vw 2vh;
box-shadow: -16vmin 0 2.2058153168602104vmin currentColor;
}
.background span:nth-child(12) {
color: #583C87;
top: 61%;
left: 60%;
animation-duration: 41s;
animation-delay: -40s;
transform-origin: 20vw 6vh;
box-shadow: -16vmin 0 2.7899144522898975vmin currentColor;
}
.background span:nth-child(13) {
color: #583C87;
top: 25%;
left: 99%;
animation-duration: 45s;
animation-delay: -48s;
transform-origin: -18vw -22vh;
box-shadow: -16vmin 0 2.1665528318256264vmin currentColor;
}
.background span:nth-child(14) {
color: #583C87;
top: 9%;
left: 58%;
animation-duration: 42s;
animation-delay: -43s;
transform-origin: 0vw 0vh;
box-shadow: -16vmin 0 2.514600340043138vmin currentColor;
}
.background span:nth-child(15) {
color: #583C87;
top: 13%;
left: 99%;
animation-duration: 32s;
animation-delay: -5s;
transform-origin: -8vw -24vh;
box-shadow: 16vmin 0 2.1232229819759505vmin currentColor;
}
.background span:nth-child(16) {
color: #E45A84;
top: 4%;
left: 29%;
animation-duration: 53s;
animation-delay: -4s;
transform-origin: 11vw -23vh;
box-shadow: 16vmin 0 2.6900293876496093vmin currentColor;
}
.background span:nth-child(17) {
color: #FFACAC;
top: 10%;
left: 69%;
animation-duration: 37s;
animation-delay: -45s;
transform-origin: -24vw -8vh;
box-shadow: 16vmin 0 2.7318391711353875vmin currentColor;
}
.background span:nth-child(18) {
color: #583C87;
top: 97%;
left: 13%;
animation-duration: 20s;
animation-delay: -4s;
transform-origin: -4vw -22vh;
box-shadow: -16vmin 0 2.9489657394881785vmin currentColor;
}
.background span:nth-child(19) {
color: #583C87;
top: 75%;
left: 5%;
animation-duration: 16s;
animation-delay: -26s;
transform-origin: 14vw -1vh;
box-shadow: 16vmin 0 2.125971148884478vmin currentColor;
}
/* ----------------------------------*/
article:hover {
outline: 3px solid rgb(19, 134, 250);
z-index: 1;
box-shadow:
0 0 6px 3px #fff, /* inner white */
0 0 10px 6px #f0f, /* middle magenta */
0 0 14px 9px #0ff; /* outer cyan */
}
a:link {
color: white;
}
a:visited {
text-decoration: none;
color: white;
}
h3 {
font-size: 1.8em;
}
a:hover {
-webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate;
}
@keyframes glow {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}
to {
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
}
}
/* Main */
#main {
-moz-transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, -moz-filter 0.5s ease;
-webkit-transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, -webkit-filter 0.5s ease;
-ms-transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, -ms-filter 0.5s ease;
transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, filter 0.5s ease;
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
color: #a0a0a1;
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-size: 15pt;
font-weight: 300;
letter-spacing: 0.025em;
line-height: 1.65;
}
#main .thumb {
-moz-transition: opacity 1.25s ease-in-out;
-webkit-transition: opacity 1.25s ease-in-out;
-ms-transition: opacity 1.25s ease-in-out;
transition: opacity 1.25s ease-in-out;
pointer-events: auto;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
opacity: 1;
overflow: hidden;
position: relative;
border-style: inset;
}
#main .thumb:after {
background-image: -moz-linear-gradient(to top, rgba(10,17,25,0.35) 5%, rgba(10,17,25,0) 35%);
background-image: -webkit-linear-gradient(to top, rgba(10,17,25,0.35) 5%, rgba(10,17,25,0) 35%);
background-image: -ms-linear-gradient(to top, rgba(10,17,25,0.35) 5%, rgba(10,17,25,0) 35%);
background-image: linear-gradient(to top, rgba(10,17,25,0.35) 5%, rgba(10,17,25,0) 35%);
pointer-events: none;
background-size: cover;
content: '';
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
#main .thumb > .image {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
#main .thumb > h2 {
pointer-events: none;
bottom: 1.1em;
font-size: 1em;
text-shadow: 2px 1.5px #4c3434;
left: 1.2em;
margin: 0;
position: absolute;
z-index: 1;
}
#main .thumb > p {
display: none;
}
#main:after {
pointer-events: none;
-moz-transition: opacity 0.5s ease, visibility 0.5s;
-webkit-transition: opacity 0.5s ease, visibility 0.5s;
-ms-transition: opacity 0.5s ease, visibility 0.5s;
transition: opacity 0.5s ease, visibility 0.5s;
background: rgba(36, 38, 41, 0.25);
content: '';
display: block;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
visibility: hidden;
width: 100%;
z-index: 1;
}
body.ie #main:after {
background: rgba(36, 38, 41, 0.55);
}
body.content-active #main {
-moz-filter: blur(6px);
-webkit-filter: blur(6px);
-ms-filter: blur(6px);
filter: blur(6px);
}
body.content-active #main:after {
pointer-events: auto;
opacity: 1;
visibility: visible;
}
body.is-preload #main .thumb {
pointer-events: none;
opacity: 0;
}
#main .thumb {
-moz-transition-delay: 2.525s;
-webkit-transition-delay: 2.525s;
-ms-transition-delay: 2.525s;
transition-delay: 2.525s;
height: calc(40vh - 2em);
min-height: 20em;
width: 25%;
}
#main .thumb:nth-child(1) {
-moz-transition-delay: 0.65s;
-webkit-transition-delay: 0.65s;
-ms-transition-delay: 0.65s;
transition-delay: 0.65s;
}
#main .thumb:nth-child(2) {
-moz-transition-delay: 0.8s;
-webkit-transition-delay: 0.8s;
-ms-transition-delay: 0.8s;
transition-delay: 0.8s;
}
#main .thumb:nth-child(3) {
-moz-transition-delay: 0.95s;
-webkit-transition-delay: 0.95s;
-ms-transition-delay: 0.95s;
transition-delay: 0.95s;
}
#main .thumb:nth-child(4) {
-moz-transition-delay: 1.1s;
-webkit-transition-delay: 1.1s;
-ms-transition-delay: 1.1s;
transition-delay: 1.1s;
}
#main .thumb:nth-child(5) {
-moz-transition-delay: 1.25s;
-webkit-transition-delay: 1.25s;
-ms-transition-delay: 1.25s;
transition-delay: 1.25s;
}
#main .thumb:nth-child(6) {
-moz-transition-delay: 1.4s;
-webkit-transition-delay: 1.4s;
-ms-transition-delay: 1.4s;
transition-delay: 1.4s;
}
#main .thumb:nth-child(7) {
-moz-transition-delay: 1.55s;
-webkit-transition-delay: 1.55s;
-ms-transition-delay: 1.55s;
transition-delay: 1.55s;
}
#main .thumb:nth-child(8) {
-moz-transition-delay: 1.7s;
-webkit-transition-delay: 1.7s;
-ms-transition-delay: 1.7s;
transition-delay: 1.7s;
}
#main .thumb:nth-child(9) {
-moz-transition-delay: 1.85s;
-webkit-transition-delay: 1.85s;
-ms-transition-delay: 1.85s;
transition-delay: 1.85s;
}
#main .thumb:nth-child(10) {
-moz-transition-delay: 2s;
-webkit-transition-delay: 2s;
-ms-transition-delay: 2s;
transition-delay: 2s;
}
#main .thumb:nth-child(11) {
-moz-transition-delay: 2.15s;
-webkit-transition-delay: 2.15s;
-ms-transition-delay: 2.15s;
transition-delay: 2.15s;
}
#main .thumb:nth-child(12) {
-moz-transition-delay: 2.3s;
-webkit-transition-delay: 2.3s;
-ms-transition-delay: 2.3s;
transition-delay: 2.3s;
}
@media screen and (max-width: 1680px) {
#main .thumb {
-moz-transition-delay: 2.075s;
-webkit-transition-delay: 2.075s;
-ms-transition-delay: 2.075s;
transition-delay: 2.075s;
height: calc(40vh - 2em);
min-height: 20em;
width: 33.33333%;
}
#main .thumb:nth-child(1) {
-moz-transition-delay: 0.65s;
-webkit-transition-delay: 0.65s;
-ms-transition-delay: 0.65s;
transition-delay: 0.65s;
}
#main .thumb:nth-child(2) {
-moz-transition-delay: 0.8s;
-webkit-transition-delay: 0.8s;
-ms-transition-delay: 0.8s;
transition-delay: 0.8s;
}
#main .thumb:nth-child(3) {
-moz-transition-delay: 0.95s;
-webkit-transition-delay: 0.95s;
-ms-transition-delay: 0.95s;
transition-delay: 0.95s;
}
#main .thumb:nth-child(4) {
-moz-transition-delay: 1.1s;
-webkit-transition-delay: 1.1s;
-ms-transition-delay: 1.1s;
transition-delay: 1.1s;
}
#main .thumb:nth-child(5) {
-moz-transition-delay: 1.25s;
-webkit-transition-delay: 1.25s;
-ms-transition-delay: 1.25s;
transition-delay: 1.25s;
}
#main .thumb:nth-child(6) {
-moz-transition-delay: 1.4s;
-webkit-transition-delay: 1.4s;
-ms-transition-delay: 1.4s;
transition-delay: 1.4s;
}
#main .thumb:nth-child(7) {
-moz-transition-delay: 1.55s;
-webkit-transition-delay: 1.55s;
-ms-transition-delay: 1.55s;
transition-delay: 1.55s;
}
#main .thumb:nth-child(8) {
-moz-transition-delay: 1.7s;
-webkit-transition-delay: 1.7s;
-ms-transition-delay: 1.7s;
transition-delay: 1.7s;
}
#main .thumb:nth-child(9) {
-moz-transition-delay: 1.85s;
-webkit-transition-delay: 1.85s;
-ms-transition-delay: 1.85s;
transition-delay: 1.85s;
}
}
@media screen and (max-width: 1280px) {
#main .thumb {
-moz-transition-delay: 1.625s;
-webkit-transition-delay: 1.625s;
-ms-transition-delay: 1.625s;
transition-delay: 1.625s;
height: calc(40vh - 2em);
min-height: 20em;
width: 50%;
}
#main .thumb:nth-child(1) {
-moz-transition-delay: 0.65s;
-webkit-transition-delay: 0.65s;
-ms-transition-delay: 0.65s;
transition-delay: 0.65s;
}
#main .thumb:nth-child(2) {
-moz-transition-delay: 0.8s;
-webkit-transition-delay: 0.8s;
-ms-transition-delay: 0.8s;
transition-delay: 0.8s;
}
#main .thumb:nth-child(3) {
-moz-transition-delay: 0.95s;
-webkit-transition-delay: 0.95s;
-ms-transition-delay: 0.95s;
transition-delay: 0.95s;
}
#main .thumb:nth-child(4) {
-moz-transition-delay: 1.1s;
-webkit-transition-delay: 1.1s;
-ms-transition-delay: 1.1s;
transition-delay: 1.1s;
}
#main .thumb:nth-child(5) {
-moz-transition-delay: 1.25s;
-webkit-transition-delay: 1.25s;
-ms-transition-delay: 1.25s;
transition-delay: 1.25s;
}
#main .thumb:nth-child(6) {
-moz-transition-delay: 1.4s;
-webkit-transition-delay: 1.4s;
-ms-transition-delay: 1.4s;
transition-delay: 1.4s;
}
}
@media screen and (max-width: 980px) {
#main .thumb {
-moz-transition-delay: 2.075s;
-webkit-transition-delay: 2.075s;
-ms-transition-delay: 2.075s;
transition-delay: 2.075s;
height: calc(28.57143vh - 1.33333em);
min-height: 18em;
width: 50%;
}
#main .thumb:nth-child(1) {
-moz-transition-delay: 0.65s;
-webkit-transition-delay: 0.65s;
-ms-transition-delay: 0.65s;
transition-delay: 0.65s;
}
#main .thumb:nth-child(2) {
-moz-transition-delay: 0.8s;
-webkit-transition-delay: 0.8s;
-ms-transition-delay: 0.8s;
transition-delay: 0.8s;
}
#main .thumb:nth-child(3) {
-moz-transition-delay: 0.95s;
-webkit-transition-delay: 0.95s;
-ms-transition-delay: 0.95s;
transition-delay: 0.95s;
}
#main .thumb:nth-child(4) {
-moz-transition-delay: 1.1s;
-webkit-transition-delay: 1.1s;
-ms-transition-delay: 1.1s;
transition-delay: 1.1s;
}
#main .thumb:nth-child(5) {
-moz-transition-delay: 1.25s;
-webkit-transition-delay: 1.25s;
-ms-transition-delay: 1.25s;
transition-delay: 1.25s;
}
#main .thumb:nth-child(6) {
-moz-transition-delay: 1.4s;
-webkit-transition-delay: 1.4s;
-ms-transition-delay: 1.4s;
transition-delay: 1.4s;
}
#main .thumb:nth-child(7) {
-moz-transition-delay: 1.55s;
-webkit-transition-delay: 1.55s;
-ms-transition-delay: 1.55s;
transition-delay: 1.55s;
}
#main .thumb:nth-child(8) {
-moz-transition-delay: 1.7s;
-webkit-transition-delay: 1.7s;
-ms-transition-delay: 1.7s;
transition-delay: 1.7s;
}
#main .thumb:nth-child(9) {
-moz-transition-delay: 1.85s;
-webkit-transition-delay: 1.85s;
-ms-transition-delay: 1.85s;
transition-delay: 1.85s;
}
}
@media screen and (max-width: 480px) {
#main .thumb {
-moz-transition-delay: 1.175s;
-webkit-transition-delay: 1.175s;
-ms-transition-delay: 1.175s;
transition-delay: 1.175s;
height: calc(40vh - 2em);
min-height: 18em;
width: 100%;
}
#main .thumb:nth-child(1) {
-moz-transition-delay: 0.65s;
-webkit-transition-delay: 0.65s;
-ms-transition-delay: 0.65s;
transition-delay: 0.65s;
}
#main .thumb:nth-child(2) {
-moz-transition-delay: 0.8s;
-webkit-transition-delay: 0.8s;
-ms-transition-delay: 0.8s;
transition-delay: 0.8s;
}
#main .thumb:nth-child(3) {
-moz-transition-delay: 0.95s;
-webkit-transition-delay: 0.95s;
-ms-transition-delay: 0.95s;
transition-delay: 0.95s;
}
}
/* Wrapper */
#wrapper {
-moz-transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, -moz-filter 0.5s ease;
-webkit-transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, -webkit-filter 0.5s ease;
-ms-transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, -ms-filter 0.5s ease;
transition: -moz-filter 0.5s ease, -webkit-filter 0.5s ease, -ms-filter 0.5s ease, filter 0.5s ease;
position: relative;
}
#wrapper:after {
pointer-events: none;
-moz-transition: opacity 0.5s ease, visibility 0.5s;
-webkit-transition: opacity 0.5s ease, visibility 0.5s;
-ms-transition: opacity 0.5s ease, visibility 0.5s;
transition: opacity 0.5s ease, visibility 0.5s;
background: rgba(36, 38, 41, 0.5);
content: '';
display: block;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
visibility: hidden;
width: 100%;
z-index: 1;
}
body.ie #wrapper:after {
background: rgba(36, 38, 41, 0.8);
}
body.modal-active #wrapper {
-moz-filter: blur(8px);
-webkit-filter: blur(8px);
-ms-filter: blur(8px);
filter: blur(8px);
}
body.modal-active #wrapper:after {
pointer-events: auto;
opacity: 1;
visibility: visible;
z-index: 10003;
}
#wrapper:before {
-moz-animation: spinner 1s infinite linear !important;
-webkit-animation: spinner 1s infinite linear !important;
-ms-animation: spinner 1s infinite linear !important;
animation: spinner 1s infinite linear !important;
pointer-events: none;
-moz-transition: top 0.75s ease-in-out, opacity 0.35s ease-out, visibility 0.35s;
-webkit-transition: top 0.75s ease-in-out, opacity 0.35s ease-out, visibility 0.35s;
-ms-transition: top 0.75s ease-in-out, opacity 0.35s ease-out, visibility 0.35s;
transition: top 0.75s ease-in-out, opacity 0.35s ease-out, visibility 0.35s;
background-image: url("images/spinner.svg");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
content: '';
display: block;
font-size: 2em;
height: 2em;
left: 50%;
line-height: 2em;
margin: -1em 0 0 -1em;
opacity: 0;
position: fixed;
text-align: center;
top: 75%;
visibility: hidden;
width: 2em;
}
body.is-preload #wrapper:before {
-moz-transition: opacity 1s ease-out !important;
-webkit-transition: opacity 1s ease-out !important;
-ms-transition: opacity 1s ease-out !important;
transition: opacity 1s ease-out !important;
-moz-transition-delay: 0.5s !important;
-webkit-transition-delay: 0.5s !important;
-ms-transition-delay: 0.5s !important;
transition-delay: 0.5s !important;
opacity: 0.25;
top: 50%;
visibility: visible;
}
/* Panel */
.panel {
padding: 4em 4em 2em 4em ;
-moz-transform: translateY(100vh);
-webkit-transform: translateY(100vh);
-ms-transform: translateY(100vh);
transform: translateY(100vh);
-moz-transition: -moz-transform 0.5s ease;
-webkit-transition: -webkit-transform 0.5s ease;
-ms-transition: -ms-transform 0.5s ease;
transition: transform 0.5s ease;
-webkit-overflow-scrolling: touch;
background: rgba(36, 38, 41, 0.975);
bottom: 4em;
left: 0;
max-height: calc(80vh - 4em);
overflow-y: auto;
position: fixed;
width: 100%;
z-index: 10001;
}
.panel.active {
-moz-transform: translateY(1px);
-webkit-transform: translateY(1px);
-ms-transform: translateY(1px);
transform: translateY(1px);
}
.panel > .inner {
margin: 0 auto;
max-width: 100%;
width: 75em;
}
.panel > .inner.split {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
}
.panel > .inner.split > div {
margin-left: 4em;
width: 50%;
}
.panel > .inner.split > :first-child {
margin-left: 0;
}
.panel > .closer {
-moz-transition: opacity 0.2s ease-in-out;
-webkit-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
background-image: url("images/close.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 3em;
cursor: pointer;
height: 5em;
opacity: 0.25;
position: absolute;
right: 0;
top: 0;
width: 5em;
z-index: 2;
}
.panel > .closer:hover {
opacity: 1.0;
}
@media screen and (max-width: 1280px) {
.panel {
padding: 3em 3em 1em 3em ;
}
.panel > .inner.split > div {
margin-left: 3em;
}
.panel > .closer {
background-size: 2.5em;
background-position: 75% 25%;
}
}
@media screen and (max-width: 980px) {
.panel > .inner.split {
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.panel > .inner.split > div {
margin-left: 0;
width: 100%;
}
}
@media screen and (max-width: 736px) {
.panel {
-moz-transform: translateY(-100vh);
-webkit-transform: translateY(-100vh);
-ms-transform: translateY(-100vh);
transform: translateY(-100vh);
padding: 4em 2em 2em 2em ;
bottom: auto;
top: calc(4em - 1px);
}
.panel.active {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
/* Poptrox Popup */
.poptrox-overlay {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.poptrox-popup {
background: rgba(31, 34, 36, 0.925);
box-shadow: 0 1em 3em 0.5em rgba(0, 0, 0, 0.25);
cursor: default;
}
.poptrox-popup:before {
-moz-transition: opacity 0.2s ease-in-out;
-webkit-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
background-image: -moz-linear-gradient(to left, rgba(31,34,36,0.35), rgba(31,34,36,0) 10em, rgba(31,34,36,0)), -moz-linear-gradient(to right, rgba(31,34,36,0.35), rgba(31,34,36,0) 10em, rgba(31,34,36,0));
background-image: -webkit-linear-gradient(to left, rgba(31,34,36,0.35), rgba(31,34,36,0) 10em, rgba(31,34,36,0)), -webkit-linear-gradient(to right, rgba(31,34,36,0.35), rgba(31,34,36,0) 10em, rgba(31,34,36,0));
background-image: -ms-linear-gradient(to left, rgba(31,34,36,0.35), rgba(31,34,36,0) 10em, rgba(31,34,36,0)), -ms-linear-gradient(to right, rgba(31,34,36,0.35), rgba(31,34,36,0) 10em, rgba(31,34,36,0));
background-image: linear-gradient(to left, rgba(31,34,36,0.35), rgba(31,34,36,0) 10em, rgba(31,34,36,0)), linear-gradient(to right, rgba(31,34,36,0.35), rgba(31,34,36,0) 10em, rgba(31,34,36,0));
content: '';
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
opacity: 1;
}
.poptrox-popup .closer {
-moz-transition: opacity 0.2s ease-in-out;
-webkit-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
background-image: url("images/close.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 3em;
height: 5em;
opacity: 0;
position: absolute;
right: 0;
top: 0;
width: 5em;
z-index: 2;
}
.poptrox-popup .nav-previous,
.poptrox-popup .nav-next {
-moz-transition: opacity 0.2s ease-in-out;
-webkit-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
background-image: url("images/arrow.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 5em;
cursor: pointer;
height: 8em;
margin-top: -4em;
opacity: 0;
position: absolute;
top: 50%;
width: 6em;
z-index: 2;
}
.poptrox-popup .nav-previous {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
left: 0;
}
.poptrox-popup .nav-next {
right: 0;
}
.poptrox-popup .caption {
padding: 2em 2em 0.1em 2em ;
background-image: -moz-linear-gradient(to top, rgba(16,16,16,0.45) 25%, rgba(16,16,16,0) 100%);
background-image: -webkit-linear-gradient(to top, rgba(16,16,16,0.45) 25%, rgba(16,16,16,0) 100%);
background-image: -ms-linear-gradient(to top, rgba(16,16,16,0.45) 25%, rgba(16,16,16,0) 100%);
background-image: linear-gradient(to top, rgba(16,16,16,0.45) 25%, rgba(16,16,16,0) 100%);
bottom: 0;
cursor: default;
left: 0;
position: absolute;
text-align: left;
width: 100%;
z-index: 2;
}
.poptrox-popup .caption h2, .poptrox-popup .caption h3, .poptrox-popup .caption h4, .poptrox-popup .caption h5, .poptrox-popup .caption h6 {
margin: 0 0 0.5em 0;
}
.poptrox-popup .caption p {
color: #ffffff;
}
.poptrox-popup .loader {
-moz-animation: spinner 1s infinite linear !important;
-webkit-animation: spinner 1s infinite linear !important;
-ms-animation: spinner 1s infinite linear !important;
animation: spinner 1s infinite linear !important;
background-image: url("images/spinner.svg");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: block;
font-size: 2em;
height: 2em;
left: 50%;
line-height: 2em;
margin: -1em 0 0 -1em;
opacity: 0.25;
position: absolute;
text-align: center;
top: 50%;
width: 2em;
}
.poptrox-popup:hover .closer,
.poptrox-popup:hover .nav-previous,
.poptrox-popup:hover .nav-next {
opacity: 0.5;
}
.poptrox-popup:hover .closer:hover,
.poptrox-popup:hover .nav-previous:hover,
.poptrox-popup:hover .nav-next:hover {
opacity: 1.0;
}
.poptrox-popup.loading:before {
opacity: 0;
}
body.touch .poptrox-popup .closer,
body.touch .poptrox-popup .nav-previous,
body.touch .poptrox-popup .nav-next {
opacity: 1.0 !important;
}
@media screen and (max-width: 980px) {
.poptrox-popup .closer {
background-size: 3em;
}
.poptrox-popup .nav-previous,
.poptrox-popup .nav-next {
background-size: 4em;
}
}
@media screen and (max-width: 736px) {
.poptrox-popup:before {
display: none;
}
.poptrox-popup .caption {
display: none !important;
}
.poptrox-popup .closer,
.poptrox-popup .nav-previous,
.poptrox-popup .nav-next {
display: none !important;
}
}
@-moz-keyframes spinner {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
-webkit-transform: rotate(359deg);
-ms-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-webkit-keyframes spinner {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
-webkit-transform: rotate(359deg);
-ms-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-ms-keyframes spinner {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
-webkit-transform: rotate(359deg);
-ms-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes spinner {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
-webkit-transform: rotate(359deg);
-ms-transform: rotate(359deg);
transform: rotate(359deg);
}
}