You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
361 lines
5.1 KiB
361 lines
5.1 KiB
.mobile_placeholder {
|
|
display: flex;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.open {
|
|
position: fixed;
|
|
top: 25vh;
|
|
display: grid;
|
|
z-index: 300;
|
|
}
|
|
|
|
.content {
|
|
height: inherit;
|
|
width: inherit;
|
|
display: grid;
|
|
grid-template-rows: .35fr .25fr 1fr .45fr;
|
|
max-width: inherit;
|
|
max-height: inherit;
|
|
background: rgba(255,0,255,0.85);
|
|
position: relative;
|
|
max-width: 60vw;
|
|
/* max-height: 51vh; */
|
|
top: 20vh;
|
|
right: -10vw;
|
|
}
|
|
|
|
.content h2 {
|
|
grid-row: 1;
|
|
display: grid;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-transform: uppercase;
|
|
/* font-size: 6.5vh; */
|
|
font-size: 3.25vh !important;
|
|
margin: 3vh 0 2vh 0 !important;
|
|
/* margin: 6vh 0 4vh 0; */
|
|
font-family: 'IBMPlexMono', sans-serif;
|
|
}
|
|
|
|
.content h3 {
|
|
grid-row: 2;
|
|
display: grid;
|
|
text-transform: uppercase;
|
|
/* font-size: 3vh; */
|
|
margin: 0;
|
|
/* line-height: 5vh; */
|
|
text-align: center;
|
|
font-size: 1.35vh !important;
|
|
line-height: 2.5vh !important;
|
|
}
|
|
|
|
.content p {
|
|
text-align: center;
|
|
margin: 2vh 4vw;
|
|
font-family: 'IBMPlexMono', sans-serif;
|
|
font-size: 1.05vh !important;
|
|
font-weight: bold;
|
|
line-height: 2.5vh !important;
|
|
}
|
|
|
|
.content a {
|
|
grid-row: 4;
|
|
display: grid;
|
|
justify-items: center;
|
|
align-items: center;
|
|
height: 4vh;
|
|
width: 10vw;
|
|
width: 30vw;
|
|
justify-self: center;
|
|
align-self: center;
|
|
margin: 0 0 2vh 0 !important;
|
|
color: #000;
|
|
font-size: 1.95vh;
|
|
cursor: pointer;
|
|
z-index: 2;
|
|
background-position: right bottom;
|
|
transition: all .75s ease-out;
|
|
}
|
|
|
|
.content a:hover {
|
|
background: linear-gradient(to right, rgba(255,255,255,0), rgba(1,1,1,1));
|
|
background-size: 200% 100%;
|
|
background-position: left bottom;
|
|
color: #90e7bc;
|
|
}
|
|
|
|
.content a:active {
|
|
background: linear-gradient(to right, #8693AB 5%, #BDD4E7 95%);
|
|
background-size: 100% 120%;
|
|
background-position: left bottom;
|
|
border: .25vw solid #8693AB;
|
|
color: #BDD4E7;
|
|
}
|
|
|
|
|
|
.close {
|
|
height: 20vh;
|
|
width: auto;
|
|
color: #000;
|
|
position: fixed;
|
|
stroke: #000;
|
|
top: 30vh;
|
|
right: -5vw;
|
|
}
|
|
|
|
|
|
.close path {
|
|
stroke-width: 1% !important;
|
|
}
|
|
|
|
.close_box {
|
|
right: 10vw;
|
|
top: 35vh;
|
|
}
|
|
|
|
input:hover ~ .close path {
|
|
stroke: rgba(1, 0, 0, 0.3);
|
|
}
|
|
|
|
input {
|
|
height: 20vw;
|
|
z-index: 200;
|
|
opacity: 0%;
|
|
cursor: pointer;
|
|
position: fixed;
|
|
top: 35vh;
|
|
right: 0;
|
|
}
|
|
|
|
|
|
@keyframes shine {
|
|
0% {
|
|
stroke: url('#myGradient');
|
|
|
|
|
|
}
|
|
50% {
|
|
stroke: url('#myGradient2');
|
|
|
|
}
|
|
100% {
|
|
stroke: url('#myGradient');
|
|
}
|
|
}
|
|
|
|
|
|
input:hover ~ .close {
|
|
animation: shine 4s ease-in forwards;
|
|
|
|
}
|
|
|
|
input:active ~ .close {
|
|
animation: shine 4s ease-in forwards;
|
|
|
|
}
|
|
|
|
|
|
@media (min-height: 750px) {
|
|
.open {
|
|
max-height: 60vh;
|
|
}
|
|
|
|
}
|
|
|
|
@media (min-height: 800px) {
|
|
.open {
|
|
max-height: 55vh;
|
|
}
|
|
}
|
|
|
|
@media (min-height: 750px) and (max-width: 768px) {
|
|
.open {
|
|
max-height: 45vh;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 3.25vh !important;
|
|
margin: 3vh 0 2vh 0 !important;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.5vh !important;
|
|
line-height: 2.5vh !important;
|
|
}
|
|
|
|
p {
|
|
font-size: 1.05vh !important;
|
|
line-height: 2.5vh !important;
|
|
}
|
|
|
|
a {
|
|
font-size: 1.45vh !important;
|
|
}
|
|
}
|
|
|
|
@media (min-height: 840px) and (max-width: 1080px) {
|
|
|
|
h2 {
|
|
font-size: 3.25vh !important;
|
|
margin: 3vh 0 2vh 0 !important;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.5vh !important;
|
|
line-height: 2.5vh !important;
|
|
}
|
|
|
|
p {
|
|
font-size: 1.05vh !important;
|
|
line-height: 2.5vh !important;
|
|
}
|
|
|
|
.content a {
|
|
font-size: 1.45vh !important;
|
|
width: 15vw !important;
|
|
height: 3.5vh !important;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
@media (min-height: 1020px) and (max-width: 768px) {
|
|
p {
|
|
font-size: 1.25vh !important;
|
|
}
|
|
|
|
a {
|
|
margin-top: 0 !important;
|
|
}
|
|
}
|
|
|
|
@media (min-height: 1000px) {
|
|
.open {
|
|
max-height: 40vh;
|
|
}
|
|
}
|
|
|
|
|
|
@media (min-height: 1070px) {
|
|
.open {
|
|
max-height: 35vh;
|
|
}
|
|
|
|
#small {
|
|
font-size: 4.9vh;
|
|
max-width: inherit;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.content {
|
|
position: relative;
|
|
max-width: 60vw;
|
|
/* max-height: 55vh; */
|
|
top: 5vh;
|
|
}
|
|
|
|
.content p {
|
|
font-size: 2vh !important;
|
|
margin: 2vh 2vw;
|
|
line-height: 3vh !important;
|
|
}
|
|
|
|
.close {
|
|
height: 25vh;
|
|
top: 15vh;
|
|
right: -5vw;
|
|
}
|
|
.close_box {
|
|
right: 5vw;
|
|
top: 20vh;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1000px) {
|
|
|
|
.open {
|
|
max-width: 35vw;
|
|
top: 20vh;
|
|
right: 5vw;
|
|
max-height: 60vh;
|
|
}
|
|
|
|
.close {
|
|
top: 3vh;
|
|
left: 70vw;
|
|
height: 25vh;
|
|
}
|
|
|
|
.close path {
|
|
stroke-width: 1% !important;
|
|
}
|
|
|
|
|
|
.close_box {
|
|
right: 20vw;
|
|
top: 10vh;
|
|
}
|
|
|
|
input:hover ~ .close path {
|
|
stroke: rgba(1, 0, 0, 0.3);
|
|
}
|
|
|
|
input {
|
|
height: 10vh;
|
|
top: 10vh;
|
|
right: 20vw;
|
|
}
|
|
.content {
|
|
padding: 5vh 1.5vw .5vh 1.5vw;
|
|
}
|
|
|
|
.content h2 {
|
|
font-size: 4.5vh;
|
|
margin: 3vh 0 2vh 0;
|
|
}
|
|
|
|
.content h3 {
|
|
font-size: 1.75vh;
|
|
line-height: 3vh;
|
|
}
|
|
|
|
.content p {
|
|
font-size: 2vh;
|
|
line-height: 4vh;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.content a {
|
|
width: 15vw;
|
|
border: .25vw solid #000;
|
|
}
|
|
|
|
.content a:hover {
|
|
border: none;
|
|
}
|
|
|
|
.content a:active {
|
|
border: .1vw solid #8693AB;
|
|
}
|
|
|
|
#larger {
|
|
padding: 5vh 1.5vw 2vh 1.5vw;
|
|
}
|
|
|
|
}
|
|
|
|
@media (min-width: 1280px) {
|
|
.content {
|
|
right: 5vw;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|