/*////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////

Author : Greyforest
Email : info@greyforest.digital
Website : https://www.greyforest.digital
						               
//////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////*/

:root {

	--color-grey-medium: #666666;
	--color-grey-dark: #2b2f33;
	--color-bluegrey: #566473;	
	--greyforest-grey-old: #CCCCCC;
	--greyforest-grey: #A1A8AE;
	--greyforest-grey-light: #C7C8CA;
	--greyforest-grey-blue: #566473;
	
}
/*════════════╕
│    FONTS    │
╘════════════*/
@font-face{font-family:Manrope;font-weight:400;src:url(../fonts/manrope/Manrope-Regular.woff2);font-display:swap;}
@font-face{font-family:Manrope;font-weight:700;src:url(../fonts/manrope/Manrope-Union-Bold.woff2);font-display:swap;}
@font-face{font-family:Manrope;font-weight:900;src:url(../fonts/manrope/Manrope-Union-ExtraBold.woff2);font-display:swap;}

/*════════════════════════╕
│    INPUT & SELECTION    │
╘════════════════════════*/
/* TEXT SELECTION */
::selection {background: #000;text-shadow: none;color:#fff;}

/* INPUTS : Placeholders */
::placeholder {color: rgba(255, 255, 255, 0.5);opacity: 1;}

/*════════════════╕
│    STRUCTURE    │
╘════════════════*/
* {box-sizing:border-box;-webkit-box-sizing:border-box;margin:0;padding:0;position:relative;font-family:'Manrope';}
a {color:var(--greyforest-grey-blue);}
audio {min-width:100px;width:calc(100% - 45px);}
b, strong {font-weight:700;}
body,html {font-size:16px;font-weight:300;}
body {padding: 0px;margin:0;background: #fff;text-align: left;color: #333333;}
button, .button {text-decoration:none;-webkit-appearance:none;border:0;width:auto;padding:1rem 2rem;background:var(--greyforest-grey-blue);color:#fff;font-size:1rem;display:inline-block;text-align:center;font-weight:normal;border-radius:2px;transition:.35s ease-in;}
button:hover, .button:hover {background:var(--greyforest-grey-blue);color:#fff;opacity:0.8;cursor:pointer;transition:.35s ease-out;}
button:active, .button:active {position:relative;top:3px;}
footer {background:var(--greyforest-grey);text-align:center;width:150px;bottom:0;left:0;z-index:100;height:auto;position:fixed;}
footer ul {display: block;list-style:none;}
footer ul li {display:block;padding:0;}
footer ul li a {color: #fff;padding:1rem;display:block;text-align:center;}
footer ul li a:hover {color: var(--greyforest-grey);background:#fff;}
form label {font-weight:bold;display:block}
form small {font-style:italic;display:block}
form input,
form input[type="range"],
form input[type="text"],
form select,
form textarea {font-size:1rem;width:100%;padding:.5rem;margin:3px auto;border:1px solid #ccc !important;background:#fff;border-radius:2px;}
h1, h2, h3, h4 {padding:1rem 0;color:#333;margin:0;}
h1 {font-size:3rem;}
h2 {font-size:2rem;}
h3 {font-size:1.5rem;}
h4 {font-size:1.25rem;}
h5 {font-size:1rem;}
h1.top {color:rgba(255,255,255,0);-webkit-text-stroke:1px var(--greyforest-grey);font-family:'Raleway';text-align:left;padding:2rem;}
h2.top {text-align:right;padding:1rem 2rem;font-size:1.5rem;}
header {z-index:10;position:fixed;left:0;top:0;display:block;margin:0;padding:0;width:150px;height:100vh;background:var(--greyforest-grey);}
header a {display:block;}
header img {display:block;width:auto;height:100px;margin:10px auto;}
header nav {display:flex;flex-flow:wrap column;justify-content:space-between;list-style:none;height:calc(100% - 120px);}
header nav ul {display:block;list-style:none;}
header nav ul li {display:block;list-style:none;}
header nav ul li a {display:block;padding:.75rem 1rem;text-align:center;font-size:.9rem;color:#fff;text-decoration:none;font-weight:400;transition:.2s ease;}
header nav ul li a:hover,
header nav ul li a.active {background:#fff;color:var(--greyforest-grey);transition:.2s ease;}
header #menu-toggle {display:none;}
main {display:block;position:relative;margin-left:150px;background:#fff;width:auto;top:0;}
p {padding:1rem 0;line-height:1.5em;}
section {padding: 2rem;}
section ol, section ul {list-style-position:inside;margin:.5rem 0;}
section ol li, section ul li {line-height:1.3;}
section ol li ol, section ul li ul {list-style-position:inside;margin:0 1rem;}



/********** Range Input Styles **********/
input[type="range"] {-webkit-appearance: none;appearance: none;background: transparent;cursor: pointer;width: 15rem; }
input[type="range"]:focus {outline: none; }

/***** Chrome, Safari, Opera and Edge Chromium styles *****/
input[type="range"]::-webkit-slider-runnable-track {background-color: #ccc;border-radius: 0.5rem;height: 0.5rem;  }
input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;margin-top: -12px;background-color: #333;height: 2rem;width: 1rem; }
input[type="range"]:focus::-webkit-slider-thumb {border: 1px solid #ccc;outline: 3px solid #ccc;outline-offset: 0.125rem; }

/******** Firefox styles ********/
input[type="range"]::-moz-range-track {background-color: #ccc;border-radius: 0.5rem;height: 0.5rem; }
input[type="range"]::-moz-range-thumb {border: none; border-radius: 0;background-color: #333;height: 2rem;width: 1rem; }
input[type="range"]:focus::-moz-range-thumb {border: 1px solid #ccc;outline: 3px solid #ccc;outline-offset: 0.125rem; }

input#file {display:none;border:0px inset #000;float:left;box-sizing:border-box;width:calc(100% - 140px);padding:18px 20px;font-size:15px;margin-bottom:10px;}
input#file.active {display:block;}

#headings {display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--greyforest-grey);}
.text-outlined {font-family:'Raleway';color:rgba(255,255,255,0);-webkit-text-stroke:1px var(--greyforest-grey);/*paint-order:stroke fill;letter-spacing:.5px;*/}

/* TABBED PANELS */
.tabs {margin:1rem 0;}
.tabs ul.tab-buttons {margin:0 0 0 0;z-index:1;position:relative;}
.tabs ul.tab-buttons li {cursor:pointer;display:inline-block;text-transform:capitalize;list-style:none;margin:0 5px -1px 0;padding:1rem;border:1px solid var(--greyforest-grey);color:var(--greyforest-grey);}
.tabs ul.tab-buttons li.active {background:var(--greyforest-grey);color:#fff;}
.tabs .tab-panel {display:none;z-index:2;position:relative;margin:0;border:1px solid var(--greyforest-grey);padding:0 1rem;background:#fff;}
.tabs .tab-panel.active {display:block;}
.tabs .tab-panel h2 {text-transform:capitalize;}

#tab-screenshots ol li {list-style:none;}
#tab-screenshots ol li a img {max-width:600px;width:100%;}


/* CARDS GRID */
ul.cards {display:grid;grid-gap:2rem;grid-template-columns:repeat(4,1fr);list-style:none;margin:0;}
ul.cards li div {background:#fff;border:1px solid #ddd;box-shadow:0px 0px 2rem rgba(0,0,0,0.05);padding:1.5rem 2rem;border-radius:1rem;display:flex;flex-flow:wrap row;justify-content:space-between;position:relative;transition:.25s ease;overflow:hidden;}
ul.cards li div:hover {box-shadow:0px 0px 2rem rgba(0,0,0,0.1);border:1px solid var(--greyforest-grey);transition:.25s ease;}

/* HOMEPAGE HERO */
section#hero {position:relative;width:calc(100% - 4rem);height:calc(100lvh - 4rem);background:var(--greyforest-grey);margin:2rem;border-radius:1rem;overflow:hidden;display:flex;flex-flow:wrap row;justify-content:center;align-items:center;}
section#hero h1 {font-size: clamp(2rem,4vw,4rem);margin:0 auto;padding:0 1rem;color:#fff;text-align:center;z-index:10;width:auto;font-weight:500;}
section#hero h1 span b {font-weight:900;color:rgba(255,255,255,0);-webkit-text-stroke:2px #fff;}
section#hero h1 img {display: block;margin: 0px auto;width: 20vw;max-width: 200px;}
section#hero h1 .thin {font-weight: 200;}
/*section#hero .parallaxed {position:absolute;top:0;left:0;width:100%;opacity:.5;filter:grayscale(1) brightness(1.4);mix-blend-mode:overlay;height:100%;z-index:0;background-size:cover;background-position:center center;}*/
section#hero .parallaxed {position:absolute;top:0;left:0;width:100%;opacity:0.3;height:100%;z-index:0;filter:brightness(1.4);background-size:cover;background-position:center center;}
section#hero .scroll-link {cursor:pointer; position: absolute; bottom: 3svh; left: 0; width: 100%; text-align: center; display: block; margin: 0; text-decoration: none; font-size: 3rem; color: #fff !Important; z-index: 101; padding: 2rem; }
section#hero .scroll-link svg {width:2vw;min-width:2rem;}
section#hero .scroll-link svg:active {top:3px;}

/* CUSTOM GRIDS */
section#plugins {opacity:1;}
section#plugins ul.cards {grid-template-columns: repeat(4,1fr);}
section#plugins ul.cards li {padding:1.5rem;border:1px solid #ddd;box-shadow:0px 0px 2rem rgba(0,0,0,0.05);border-radius:1rem;transition:.25s ease;}
section#plugins ul.cards li:hover {border:1px solid var(--greyforest-grey);box-shadow:0px 0px 2rem rgba(0,0,0,0.1);transition:.25s ease;}
section#plugins ul.cards li .flex {display:flex;justify-content:space-between;width:100%;}
section#plugins ul.cards li h3 {font-size:1.5rem;line-height:1.2em;letter-spacing:-1px;margin:0;padding:0 1rem 0 0;font-weight:700;}
section#plugins ul.cards li h3 a {text-decoration:none;color:var(--greyforest-grey-blue);}
section#plugins ul.cards li h4 {margin:0;padding:0;font-size:.75rem;font-weight:500;color:#888;line-height:1.5em;position:relative;z-index:1;}
section#plugins ul.cards li p {padding:1rem 0 .5rem 0;font-size:1rem;}
section#plugins ul.cards li small {position:absolute;bottom:1rem;right:1rem;left:auto;top:auto;}
section#plugins ul.cards li small a {display:block;padding:.5rem;line-height:1em;border-radius:100%;background:var(--greyforest-grey-blue);color:#fff;}
section#plugins ul.cards li small a:hover {opacity:0.6;}
section#plugins ul.cards li small a::after {display:none;}

section#work.plugins #plugin-filters {margin:0 0 1rem 0;}
section#work.plugins #plugin-filters li {cursor:pointer;display:inline-block;list-style:none;margin:0 1rem .5rem 0;}
section#work.plugins #plugin-filters li.active span,
section#work.plugins #plugin-filters li:hover span {text-decoration:underline;}


section#tool-cards {opacity:1;}
section#tool-cards ul.cards {grid-template-columns:repeat(auto-fill, minmax(min(400px,100%), 1fr));grid-template-rows:repeat(2,1fr);}
section#tool-cards ul.cards li {display:block;}
section#tool-cards ul.cards li:hover {transform:scale(1);}
section#tool-cards ul.cards li a {text-decoration:none;text-align:center;position:relative;top:0;left:0;width:100%;height:100%;display:block;flex-flow:wrap row;align-content:center;justify-content:center;padding:2rem;}
section#tool-cards ul.cards li a img {width:100px;transform:translateY(0px);transition:.5s ease;}
section#tool-cards ul.cards li a h3 {padding:2rem 2rem 0 2rem;}
section#tool-cards ul.cards li a:hover img {transform:translateY(-5px);transition:.5s ease;}

section#work ul.cards {grid-template-columns: repeat(auto-fill, minmax(min(400px,100%), 1fr));grid-gap:2rem;}
section#work ul.cards li {opacity:1;}
section#work ul.cards li div {cursor:pointer;transition:0.5s ease;position:relative;padding:0;height:33vh;overflow:hidden;}
section#work ul.cards li div .caption {opacity:1 !Important;transition:0.5s ease;z-index:2;padding:1em;display:block;color:#fff;position:absolute;bottom:0;text-align:left;text-shadow:0px 0px 10px #222;}
section#work ul.cards li div .caption h2 {color:#fff;padding:0;margin:0;font-size:1.5em;text-align:left;}
section#work ul.cards li div .caption P {padding:0px;color:#fff;margin:0;text-align:left;}
section#work ul.cards li div .overlay {z-index:3;cursor:auto;opacity:0;display:flex;flex-flow:wrap row;align-items:center;justify-content:center;position:absolute;top:0;left:0;width:100%;height:0;overflow:hidden;background:#fff;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;}
section#work ul.cards li div .overlay P {color:#666;font-size:.9em;margin:0;padding:.5rem 1rem;display:block;text-align:center;}
section#work ul.cards li div .overlay P a {text-decoration:none;font-weight:light;margin-top:1.5em;display:inline-block;border:1px solid var(--greyforest-grey-blue);color:var(--greyforest-grey-blue);background:none;}
section#work ul.cards li div .overlay P a:hover {color:#fff;background:var(--greyforest-grey-blue);}
section#work ul.cards li div .overlay h3 {font-size:1rem;margin:0;color:var(--greyforest-grey-blue);text-align:center;padding:.5rem 1rem;}
section#work ul.cards li div .underlay {filter: grayscale(0%);opacity:1;transition:0.5s ease;position:absolute;z-index:0;height:100%;width:100%;left:0;top:0;}

section#work ul.cards li.active div {border:1px solid #ddd;transition:all 0.35s ease;}
section#work ul.cards li.active div .overlay {opacity:1;height:100%;transition:all 0.35s ease;}
section#work ul.cards li div:hover {transition:.5s ease;box-shadow:0px 0px 2rem rgba(0,0,0,0.15);}
section#work ul.cards li div:hover .underlay {filter: grayscale(100%);opacity:0.5;transition:0.5s ease;}
section#work ul.cards li div:hover .caption {opacity:1 !Important;transform:scale(1);bottom:0.5em;transition:0.5s ease;text-shadow:0px 0px 10px #000;}


#homepage section#work ul.cards {grid-template-columns: repeat(3,1fr);grid-gap:2rem;}

section#work.plugins ul.cards li div {background-color:var(--greyforest-grey);cursor:pointer;transition:0.5s ease;position:relative;padding:0;height:auto;aspect-ratio:1000 / 667;overflow:hidden;}
section#work.plugins ul.cards li div .caption {display:flex;text-align:left;text-shadow:0px 0px 10px #222;}


#homepage #homepage-animations h2 {font-size:15vw;margin-bottom:0;padding-bottom:0;line-height:1;}
#homepage #homepage-animations h3 {font-size:9vw;margin:0;padding:0;line-height:1;}
#homepage #homepage-animations span {display:inline-block;}
#homepage #homepage-portfolio {font-size:9vw;margin:3rem 0 2rem 0;padding-bottom:0;line-height:1;}


.animation-layer.animation-layer-fadeup {transform:translateY(.7rem);opacity:0;}
.animation-layer.animation-layer-fadeup.animation-active {transform:translateY(0);opacity:1;transition:all 1s ease .2s;}






/*/////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-width : 1280px) {

#headings {display:block;}

h1.top {height:auto;font-size:2rem;padding:1rem;}
h2.top {font-size:1.5rem;text-align:left;padding:0 1rem 1rem 1rem;}

section#plugins ul.cards {grid-template-columns: repeat(2,minmax(200px,1fr));}
section#work ul.cards {grid-template-columns: repeat(2,minmax(200px,1fr));}

}

/*/////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-width : 768px) {

button {display:block;width:100%;}
footer {position:relative;width:auto;text-align:center;padding:1rem;}
footer ul li {display:inline-block;}
h1.top {font-size:2rem;}
h2.top {font-size:1rem;}
header {position:relative;top:0;width:100%;height:auto;display:block;padding:0;}
header a {padding:calc(1rem - 5px) 1rem;display:inline-block;}
header img {height:50px;margin:0;}
header nav {display:none;position:relative;width:auto;height:auto;border-top:1px solid rgba(255,255,255,0.2);}
header nav ul {padding:1rem;}
header nav ul li a {padding:1rem;}
header nav footer ul {text-align:center;padding:0 1rem 1rem 1rem;}
header nav footer ul li {display:inline-block;}
header #menu-toggle {cursor:pointer;position:absolute;top:0;right:0;display:flex;justify-content:center;align-items:center;height:calc(40px + 2rem);width:calc(40px + 2rem);text-align:center;color:#fff;}
header #menu-toggle svg {height: 2.5em;display: inline-block;}
header #menu-toggle svg:active {transform:scale(0.95);}
main {margin:0;padding:0;}
section {padding:1rem;}
section#hero {margin:1rem;width:calc(100% - 2rem);height:calc(100svh - 2rem - 75px);}
section#hero h1 {height:auto;font-size:2rem;position:relative;text-align:center;padding:1rem;left:0;width:auto;}
section#hero .scroll-link {bottom:0;}

ul.cards {grid-gap:1rem;grid-template-columns:1fr !important;}
ul.cards li h3 {font-size:1rem;}

.tabs ul.tab-buttons li {font-size:.8rem;padding:.5rem;}

}	
/*/////////////////////////////////////////////////////////////////////////////////*/