/*****************************/
/* Options */
/*****************************/
/* Custom Gradient */
body {
height: 100%;
overflow: auto;
background: linear-gradient(165deg, #f8f8f8 30%, #FFF 0%);
}
/* Must enable in Themes in Super first - Enabled */
.super-navbar.simple {
background-color:transparent !important;
}
/* Remove logo replacement text in Super navbar */
.super-navbar__logo-text {
display: none;
}
/* Size all page titles on main pages. Change to your pretty URLs */
[id*="about"] h1.notion-header__title,
[id*="portfolio"] h1.notion-header__title,
[id*="posts"] h1.notion-header__title,
[id*="recommendations"] h1.notion-header__title,
[id*="downloads"] h1.notion-header__title,
[id*="index"] h1.notion-header__title{
font-size: 4em !important;
}
/* Home page subheader */
[id*="index"] h1.notion-heading {
font-weight: 400 !important;
margin-top: 0px !important;
margin-left: 5px !important;
padding:0px !important;
}
/* Decrease size for smaller screens */
@media (max-width:749px) {
[id*="index"] h1.notion-header__title {
font-size: 3em !important;
}
[id*="index"] .notion-heading {
padding-left:0px;
}
}
/* Page title h1 sizes for smaller screens */
@media (max-width:414px) {
[id*="about"] h1.notion-header__title,
[id*="portfolio"] h1.notion-header__title,
[id*="posts"] h1.notion-header__title,
[id*="recommendations"] h1.notion-header__title,
[id*="downloads"] h1.notion-header__title {
font-size: 2.5rem !important;
}
}
/* Enable pointer-events to generate affliate links using super:so Link property in Notion */
[id*="recommendations"] .notion-collection-card {
pointer-events: none !important;
}
/* Custom Footer in <body> - Disabled */
.footer {
display:none;
}
/* Newsletter in Footer - Enabled */
.newsletter {
/*display:none;*/
}
/* Table-based Footer - Enabled */
.notion-collection-table__wrapper {
/*display:none;*/
}
/* Hide Notion Toggle - hack to hide content on pages. Drag into toggle. */
/* If you want to use toggles, replace .notion-toggle with #block-[your block id] */
.notion-toggle {
display: none !important;
}
/* Currently Baby Yoda 😀 - if you want a custom photo to replace "Content" database, insert below. Check out [insert_your_domain]/content to preview */
#page-content h1:after {
/*content:url('enteryoururlhere')!important;*/
}
/* End Options */
* {
-webkit-font-smoothing: antialiased !important;
text-rendering: optimizeSpeed !important;
outline: none !important;
border: none !important;
}
html, body {
overflow-x: hidden!important;
}
@media only screen and (max-width:900px) {
body {
background-image:none !important;
}
}
/* Custom gradient in Options */
body {
/* background: linear-gradient(165deg, #FAFAFA 30%, #FFF 0%); */
}
:root {
--transition: all .2s ease-in-out!important;
--transition-alt: all 0.8s cubic-bezier(0.2, 1, 0.2, 1) !important;
--color-text-gray: #808c99!important;
--rounded: 8px!important;
}
@media (max-width: 900px) {
:root {
--column-spacing: 30px !important;
--navbar-height-scrolled: 80px !important;
--padding-right: calc(env(safe-area-inset-right) + 20px) !important;
--padding-left: calc(env(safe-area-inset-left) + 20px) !important;
--padding-iphone-left: 20px !important;
--padding-iphone-right: 20px !important;
}
}
html {
min-height: 100%;
position: relative;
}
.super-content.max-width {
max-width: 1000px !important;
margin-bottom: min(200px,20%) !important;
}
.footer.super-content.max-width {
margin-bottom:0px !important;
}
div img {
object-fit:cover !important;
}
@media (max-width: 900px) {
.super-content {
padding-right: var(--padding-right) !important;
padding-left: var(--padding-left) !important;
max-width: 1600px !important;
margin: 0 auto !important;
}
.notion-header__content {
padding-right: var(--padding-right) !important;
padding-left: var(--padding-left) !important;
max-width: 1600px !important;
margin: 0 auto !important;
}
}
@media (min-device-width:320px) and (max-device-width:768px) {
.super-content {
padding-right: var(--padding-iphone-right) !important;
padding-left: var(--padding-iphone-left) !important;
max-width: 1600px !important;
margin: 0 auto !important;
}
.notion-header__content {
padding-right: var(--padding-iphone-right) !important;
padding-left: var(--padding-iphone-left) !important;
max-width: 1600px !important;
margin: 0 auto !important;
}
}
@media (max-width:480px) {
.super-content.max-width {
margin-bottom: 0px;
padding-bottom: 30vh !important;
}
.super-content {
padding-right: var(--padding-right) !important;
padding-left: var(--padding-left) !important;
}
.notion-header__content {
padding-right: var(--padding-right) !important;
padding-left: var(--padding-left) !important;
}
}
h1.notion-header__title {
padding: 0px;
}
h2 {
font-weight: 700 !important;
}
.notion-header__content.no-cover.no-icon.max-width,
.notion-header__content.has-cover.no-icon.max-width {
max-width: 1000px;
}
.notion-page__icon {
display: none !important;
}
.notion-divider {
border-bottom: 1px solid rgb(55 53 47 / 18%) !important;
}
.notion-page__title .notion-semantic-string {
border-bottom: none !important;
}
.notion-image.page-width>div {
height: auto !important;
}
/* Child page headers - do not touch */
h1.notion-header__title {
font-size: 2em !important;
}
/* Adjust headers on pages */
.notion-header__icon-wrapper.no-cover.has-icon-image {
position: relative !important;
margin-left: 0px !important;
padding-left: 0px !important;
}
.notion-header__icon-wrapper.has-icon-image {
margin: 0 auto !important;
position: relative !important;
}
.notion-header__icon-wrapper.no-cover.has-icon-image {
top: 0px;
}
.notion-header__cover.no-cover {
display: none !important;
}
.notion-header__cover {
display: none !important;
}
/* Hide breadcrumb and Notion navbar */
a.notion-link.notion-breadcrumb__item,
span.notion-breadcrumb__divider {
display: none;
}
.notion-navbar {
margin-bottom: 20px;
background-color: transparent !important;
display: none;
}
/*****************************/
/* Custom Super Navbar "Simple" */
/* Enable from "Themes" in Super menu */
/*****************************/
.super-navbar.simple {
/* Instructions in options */
}
.super-navbar__content {
padding-right: 0px !important;
}
.super-navbar__item {
display: block !important;
padding-right: 5px !important;
}
.super-navbar__item {
font-size: 16px;
color: black !important;
font-weight: 400;
}
@media (min-width:999px) {
.super-navbar.simple {
width: 1000px !important;
padding-left: calc(env(safe-area-inset-left) + 96px) !important;
padding-right: calc(env(safe-area-inset-right) + 96px) !important;
margin: auto !important;
}
}
@media (min-width:861px) {
.super-navbar.simple {
padding-left: calc(env(safe-area-inset-left) + 96px) !important;
padding-right: calc(env(safe-area-inset-right) + 96px) !important;
margin: 0px auto !important;
}
a.notion-link.super-navbar__item::after {
content: '';
display: block !important;
width: 0;
height: 2px;
background: gray;
transition: width .3s;
}
a.notion-link.super-navbar__item:hover::after {
width: 100%;
transition: width .3s;
}
}
/*****************************/
/* Index Page */
/*****************************/
.notion-header {
margin: 200px 0 10px 0 !important;
}
@media only screen and (max-width:900px) {
.notion-header {
margin-top:100px !important;
}
}
.notion-navbar,
.notion-collection__header,
.notion-property__title__icon-wrapper,
.notion-header__cover.no-cover {
display: none !important;
}
/*****************************/
/* Global Gallery */
/* Effects index, portfolio, posts, recommendations, downloads */
/*****************************/
.notion-collection__header,
.notion-collection-card__content,
.notion-property__title__icon-wrapper {
display: none !important;
}
.notion-collection-card .notion-property__title {
padding-left:0px !important;
font-size:1em !important;
padding-top:10px !important;
color: var(--color-text-default);
}
.notion-collection-gallery {
grid-gap:10px 40px !important;
border: none !important;
grid-template-columns: repeat(auto-fill, minmax(var(--collection-card-cover-size-medium), 1fr))!important;
}
.notion-collection-gallery {
border-top: 0px !important;
}
.notion-collection-card {
transition: all .3s ease !important;
box-shadow: none !important;
background:transparent !important;
}
.notion-collection-card:hover {
/*transform: scale(0.98) !important;*/
background: none !important;
}
.notion-collection-gallery .notion-collection-card img {
/*transform: scale(1) !important;*/
/*transition: all 0.6s ease-in-out !important;*/
}
.notion-collection-gallery .notion-collection-card:hover {
cursor: pointer;
/*transition: all 0.5s ease-in-out !important;*/
}
.notion-collection-gallery .notion-collection-card:hover img {
/*transform: scale(1.1) !important;*/
}
.notion-collection-card__cover,
.notion-collection-card__cover span,
.notion-collection-card__cover img {
border-radius: 8px !important;
max-height: 200px !important;
overflow: hidden !important;
height: 200px !important;
border: none !important;
}
@media (max-width:768px) {
.notion-collection-card__cover,
.notion-collection-card__cover span,
.notion-collection-card__cover img {
height: 250px !important;
}
}
/*****************************/
/* Image fade in animation */
/*****************************/
.notion-collection-card {
-webkit-animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
-moz-animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
-o-animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
-ms-animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*****************************/
/* Callout */
/*****************************/
.notion-callout {
padding: 30px 20px;
border-radius:10px;
}
.notion-callout:is(.bg-brown-light, .bg-orange-light, .bg-blue-light, .bg-green-light, .bg-purple-light, .bg-pink-light, .bg-red-light) {
background-color: var(--background-color-callouts) !important;
border:1px solid #37352f !important;
}
/*****************************/
/* Quote */
/*****************************/
.notion-quote {
border-left: 2px solid black !important;
margin-left:3px;
}
/*****************************/
/* Global Post Lists */
/*****************************/
.notion-collection-list {
display: block !important;
max-width: 100% !important;
border-top: 0 !important;
}
/* Set spacing between posts */
.notion-collection-list__item {
padding: 0 !important;
margin: 1em 0 3em 0 !important;
border-radius: 0 !important;
display: block !important;
}
@media screen and (min-width: 32em) {
.notion-collection-list__item {
margin: 0.5em 0 2em 0 !important;
}
}
@media screen and (max-width:414px) {
.notion-collection-list__item {
margin: 1em 0 2em 0 !important;
}
}
.notion-collection-list__item:last-child {
/*margin-bottom: 2em !important;*/
}
/* Hover styles for listing of posts */
.notion-collection-list__item:hover {
background-color: transparent !important;
}
.notion-collection-list__item:hover .property-4d757046 .notion-semantic-string {
/*border-bottom: 1px solid var(--color-text-gray) !important;*/
}
.notion-collection-list__item .property-4d757046 {
display:inline-block !important;
}
@media only screen and (min-width:750px) {
.notion-collection-list__item .property-4d757046 span.notion-semantic-string span::after {
/*content: '';*/
/*display: block !important;*/
/*width: 0;*/
/*height: 2px;*/
/*background: gray;*/
/*transition: width .3s;*/
}
.notion-collection-list__item:hover .property-4d757046 span.notion-semantic-string span::after {
/*width: 100%;*/
/*transition: width .3s;*/
}
}
/* Restyle meta data of each article in the list */
.notion-collection-list__item-property {
padding: 0 !important;
}
.notion-collection-list__item-property .notion-semantic-string {
white-space: normal !important;
}
.notion-collection-list__item-content,
.notion-collection-list__item-property .notion-property__select {
display: block !important;
}
.notion-property__title {
display: block !important;
}
/* Hides icon */
.notion-property__title .notion-property__title__icon-wrapper {
display: none !important;
}
/* Hides post Name property */
.notion-collection-list__item .notion-property__title .notion-semantic-string {
display: none !important;
margin-left:0px;
}
/* Resets font size of excerpt */
.notion-collection-list__item-property .notion-property__text .notion-semantic-string {
font-size: 1rem !important;
line-height: 1.7 !important;
}
/* Resets font size of date */
.notion-collection-list__item-property .notion-property__date {
font-size: 1rem !important;
}
/* Resets spacing and padding on date */
.notion-collection-list__item-property .notion-property__date .notion-semantic-string {
min-height: auto !important;
padding: 0 !important;
}
/* Set color and size of date */
.notion-collection-list__item-property .notion-property__date .notion-semantic-string .date {
color: var(--color-text-gray) !important;
font-size: 0.875rem !important;
}
/* Styles for title */
.notion-collection-list__item-property .property-4d757046 {
margin: 0.5em 0 !important;
}
.notion-collection-list__item-property .property-4d757046 .notion-semantic-string {
font-weight: 500 !important;
font-size: 1.875rem !important;
letter-spacing: -0.01em !important;
line-height: 1.25 !important;
border-bottom: 1px solid transparent !important;
transition: border-color .2s ease-in;
}
@media screen and (min-width: 32em) {
.notion-collection-list__item-property .property-4d757046 .notion-semantic-string {
font-size: 1.5rem !important;
line-height: 1.15 !important;
}
}
@media screen and (max-width:414px) {
.notion-collection-list__item-property .property-4d757046 .notion-semantic-string {
font-size: 1.5rem !important;
}
}
/*****************************/
/* Table Footer */
/* Credit to Sam Judge. Footer makes use of the standard table view consider whether you’ll need this feature for other aspects of your site before implementing the footer in this way */
/*****************************/
/* Add dividing border */
.notion-collection-table__wrapper {
border-top: 1px solid rgba(55, 53, 47, .09) !important;
padding-top: 1em !important;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background-color: white;
text-align: center;
margin-top: 100%;
padding: 10px 2px 10px 2px;
}
/* Reset font size */
.notion-collection-table {
font-size: .8rem !important;
margin-top: 5px !important;
}
/* Hide header row */
.notion-collection-table th {
display: none !important;
}
/* Remove borders of cells */
.notion-collection-table td {
border: 0 !important;
padding: 6px 0 !important;
}
/* Hide title column */
.notion-collection-table__body .title {
display: none !important;
}
/* Reinstate usual styling of links */
.notion-collection-table td .notion-semantic-string .link {
opacity: .7 !important;
transition: opacity .1s ease-in;
}
.notion-collection-table td .notion-semantic-string .link:hover {
opacity: 1 !important;
}
/* Don’t truncate content on small screens */
.notion-collection-table__cell .notion-semantic-string {
white-space: normal !important;
}
/*****************************/
/* Recommendations */
/*****************************/
/* Cover */
.notion-collection-card__cover.large img {
border-radius: 0px !important;
width: 100% !important;
object-fit: contain !important;
object-position: top !important;
padding-top: 5px !important;
}
/* Summary and header */
.notion-collection-gallery.large .notion-collection-card__content.no-title {
display: block !important;
padding-top: 0px !important;
}
.notion-collection-gallery.large .notion-image.page-width img {
border-radius: 0!important;
}
.notion-collection-gallery.large {
display: flex;
border: none !important;
padding: 0!important;
padding-top: 16px !important;
justify-content: space-between;
flex-wrap: wrap;
grid-gap:40px !important;
}
/* Header font size */
.notion-collection-gallery.large .notion-property.notion-property__text.property-4d757046 {
font-size: 20px;
font-weight: 500;
}
/* Summary font size */
.notion-collection-gallery.large .notion-property.notion-property__text.property-4158617e {
font-size: 1rem;
}
table.notion-collection-table .property-4158617e {
font-size: inherit !important;
}
/* Card layout */
.notion-collection-gallery.large .notion-collection-card {
position: relative !important;
box-shadow: none!important;
display: flex!important;
border: none!important;
transform: scale(1) !important;
background: none !important;
filter: grayscale(0) !important;
flex-wrap: wrap;
justify-content: space-between !important;
width: 46% !important;
}
.notion-collection-gallery.large .notion-collection-card__cover,
.notion-collection-gallery.large .notion-collection-card__cover span {
width: auto;
margin: 0 !important;
max-height: 250px !important;
object-position: top !important;
height: 250px !important;
border-radius: 0px !important;
}
.notion-collection-gallery.large .notion-collection-card__cover {
border-radius: 0px !important;
position: relative!important;
border: none!important;
flex: 0 0 150px !important;
width: 46% !important;
}
.notion-collection-gallery.large .notion-collection-card__content {
padding-left: 15px!important;
position: relative!important;
flex: 1 !important;
white-space: nowrap !important;
}
.notion-collection-gallery.large .notion-collection-card__content span {
white-space: normal !important;
}
.notion-collection-gallery.large .notion-property__text {
margin: 0px !important;
}
.notion-collection-gallery.large .notion-property.notion-property__text.property-4d757046 {
/*font-size: 1.5rem !important;*/
margin-bottom:5px !important;
}
@media (max-width:810px) {
/* Card width */
.notion-collection-gallery.large .notion-collection-card {
width: 90% !important;
}
}
@media (max-width:480px) {
/* Card width */
.notion-collection-gallery.large .notion-collection-card {
width: 100% !important;
}
/* Title of media */
.notion-collection-gallery.large .notion-property.notion-property__text.property-4d757046 {
/*font-size: 20px !important;*/
}
}
/*****************************/
/* Downloads */
/*****************************/
.notion-collection-gallery.small .notion-collection-card__content.no-title {
display: flex !important;
justify-content: space-between !important;
padding: 5px 0px;
}
/* Cover */
.notion-collection-gallery.small img {
object-position: top !important;
}
/* Downloadable Title */
.notion-collection-gallery.small .notion-property.notion-property__text.property-4d757046 {
font-size: 1rem;
font-weight: 500;
margin-top: 0px;
}
/* Price */
.notion-collection-gallery.small .notion-property.notion-property__number.property-48515d44 {
font-size: 1.2rem;
font-weight: 600;
}
@media (max-width:768px) {
/* Downloadable title */
.notion-collection-gallery.small {
/*grid-gap:40px !important;*/
}
.notion-collection-gallery.small .notion-property.notion-property__text.property-4d757046 {
font-size: 1rem;
}
.notion-collection-gallery.small .notion-collection-card__content.no-title {
display: block !important;
/*justify-content: space-between !important;*/
/*padding: 5px 0px;*/
margin-bottom:20px !important;
}
}
/*****************************/
/* Custom footer html injection in Super body injection */
/*****************************/
.footer {
padding-bottom: 0px !important;
}
.footer-copy {
margin-bottom: 30px;
font-size: .8rem !important;
position: absolute;
bottom: 0px;
max-width: 808px;
}
.footer-line {
padding-top: 6px !important;
padding-bottom: 6px !important;
}
.social-icons a.nav-link {
padding-left: 0px;
}
.footer .nav-link {
color: var(--color-text-default);
transition: var(--transition);
text-decoration: none;
padding: 12px 20px;
font-size: 16px;
}
.footer .nav-link:hover {
opacity: 0.6;
}
.newsletter {
margin-bottom: 20px;
}
@media (max-width:414px) {
.footer.super-content.max-width {
padding-bottom: 0 !important;
margin-bottom:0px !important;
}
}
/*****************************/
/* Signup form - controlled in Custom Footer injected in Super <body>. */
/* Replace href in <body> */
/*****************************/
.newsletter-heading {
font-size: 1rem !important;
font-weight: 500;
margin-top: 10px;
margin-bottom: 10px;
}
.newsletter-subheading {
margin-bottom: 10px;
width: 300px
}
.notion-header__content.has-icon-image {
max-width: 1000px;
margin-bottom: -30px !important;
}
button.button-subscribe {
height: 36px;
font-size: 12px;
padding-left: 15px;
border: solid 1px black !important;
width:auto;
border-radius:10px;
transform: translateX(0);
transition: all .2s ease-out;
background-color: transparent;
font-family: Poppins, sans-serif;
padding-right:10px;
display:inline-block;
}
button.button-subscribe:hover {
transform: translateX(5px);
transition: all .2s ease-out;
backface-visibility: hidden;
-webkit-font-smoothing: subpixel-antialiased
}
.button-subscribe a {
color:black !important;
text-decoration: none;
font-weight:500;
}
.button-subscribe img {
vertical-align: text-bottom;
width: 15px;
}
/* Misc */
#page-content h1 {
visibility: hidden;
position: relative;
width: auto;
font-size:1.5em !important;
}
#page-content h1:before {
content:'We\'re not sure where it is...' !important;
color:black !important;
visibility: visible;
font-weight:200;
font-size: .9em;
}
#page-content h1:after {
visibility: visible;
position: relative;
float:left;
/*content: 'The requested url was not found on this server.';*/
content:url('https://c.tenor.com/lnzb_NOYs1cAAAAC/baby-yoda.gif');
white-space: pre-wrap;
font-weight:300;
font-size: .9em !important;
width:100%;
overflow-x:hidden;
display:inline-block;
padding-top:20px;
height:90vh;
}
#page-content .notion-collection-table__wrapper {
display: none;
}
#page-content picture {
position: relative;
visibility: hidden;
width: 100%;
}
#page-content picture:after {
visibility: visible;
position: relative;
content:"Page Not Found";
font-size: 3em !important;
font-weight:600;
}
.notion-header__title-wrapper {
display:block !important;
}
#page-content img.notion-header__icon {
display:none;
}
.notion-header__content.no-cover.has-icon-image {
margin:0 auto;
}
@media (max-width:414px) {
#page-content h1:after {
zoom:70% !important;
}
#page-content h1:before {
font-size: .7em;
}
#page-content picture:after {
font-size: 2em !important;
}
#page-content .notion-header__title-wrapper {
margin-top: 0px !important;
}
}
/*****************************/
/* Synched Global Blocks page @ [insert_your_domain]/global-blocks */
/*****************************/
/* Gray callout link animation */
.notion-callout.bg-gray-light p.notion-callout__content::after {
content:'';
display: block;
width: 0;
height: 2px;
background: gray;
-webkit-transition: width .3s;
transition: width .3s;
}
.notion-callout.bg-gray-light p.notion-callout__content:hover::after {
width: 100%;
-webkit-transition: width .3s;
transition: width .3s;
overflow:visible;
}
/* Link rules - Anything in gray callout on Globals page */
.notion-callout.bg-gray-light {
width:fit-content;
height: fit-content;
padding: 10px 18px 5px 0px;
background-color: transparent;
color: black !important;
text-align: center;
font-weight: 400;
-webkit-transition: ease-out 0.4s;
-moz-transition: ease-out 0.4s;
transition: ease-out 0.4s;
border-radius:0px;
}
.notion-callout.bg-gray-light:hover {
/*padding-left:8px;*/
/*font-weight:400;*/
}
/* Yellow callout is styled but isn't a synced global block */
.notion-callout.bg-yellow-light p.notion-callout__content::after {
content:'';
display: block;
width: 0;
height: 2px;
background: gray;
-webkit-transition: width .3s;
transition: width .3s;
}
.notion-callout.bg-yellow-light p.notion-callout__content:hover::after {
width: 100%;
-webkit-transition: width .3s;
transition: width .3s;
overflow:visible;
}
.notion-callout.bg-yellow-light {
width:fit-content;
height: fit-content;
padding: 10px 18px 5px 8px;
background-color: transparent;
color: black !important;
text-align: center;
font-weight: 400;
-webkit-transition: ease-out 0.4s;
-moz-transition: ease-out 0.4s;
transition: ease-out 0.4s;
border-radius:0px;
}
.notion-callout.bg-yellow-light:hover {
padding-left:15px;
font-weight:400;
}
.notion-collection-card:hover, .notion-collection-list__item:hover {
background:transparent;
transform: translatey(-5px);
transition:all 300ms ease-in-out;
}
.notion-collection-card, .notion-collection-list__item {
/*background:transparent;*/
transform: translatey(0px);
transition:all 300ms ease-in-out;
}