/*-----------------------------------------------------------------------------------

Theme Name: GhostPool V2
Version: 1.0
Requires at least: 5.4
Tested up to: 6.0.1
Requires PHP: 7.3
Description: Designed by <a href="https://www.ghostpool.com">GhostPool.com</a>.
Author: GhostPool
Author URI: https://www.ghostpool.com
Theme URI: https://themeforest.net/item/network-intranet-extranet-community-wordpress-theme/50747807
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: full-width-template, threaded-comments, one-column, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-menu, editor-style, featured-images, rtl-language-support, sticky-post, theme-options, translation-ready
Text Domain: network

/*--------------------------------------------------------------------------------------

Fonts

--------------------------------------------------------------------------------------*/

@font-face {
font-family: "Work Sans";
src: 
	url('./assets/fonts/Work_Sans/WorkSans-VariableFont_wght.woff2') format('woff2 supports variations'),
	url('./assets/fonts/Work_Sans/WorkSans-VariableFont_wght.woff2') format('woff2-variations'),
	url('./assets/fonts/Work_Sans/WorkSans-VariableFont_wght.ttf') format('truetype');
font-style: normal;
font-weight: 100 900;
font-display: swap;
}


/*--------------------------------------------------------------------------------------

CSS Resets

--------------------------------------------------------------------------------------*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,section,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin:0;
vertical-align:baseline;
}
section,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block;
}
blockquote,q {
quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after {
content:'';
content:none;
}

/*--------------------------------------------------------------------------------------

General Styling

--------------------------------------------------------------------------------------*/

/*--------------------------------------------------------------
General Styling - Document
--------------------------------------------------------------*/

* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: none;
-webkit-text-size-adjust: none;
}
:root {
--gp-primary-color: #081b3a;
--gp-secondary-color: #f36b17;
--gp-tertiary-color: #c8f2ff;
--gp-content-width: 1060px;
}
html {
overflow-x: hidden;
}
body {
font-family: "Work Sans", Arial, sans-serif;
color: #000;
font-size: 20px;
line-height: 36px;
font-weight: 350;
letter-spacing: -0.5px;
font-optical-sizing: auto;
text-rendering: optimizeSpeed;
}

/*--------------------------------------------------------------
General Styling - Text
--------------------------------------------------------------*/

h1 {
margin: 0 0 30px 0;
font-size: 34px;
line-height: 46px;
letter-spacing: -1.5px;
font-weight: 600;
}
h2 {
margin: 0 0 30px 0;
font-size: 34px;
line-height: 46px;
letter-spacing: -1.5px;
font-weight: 600;
}
h3 {
margin: 0 0 20px 0;
font-size: 32px;
line-height: 44px;
font-weight: 600;
color: var(--gp-primary-color);
}
p { 
margin: 0 0 20px;
}
p:last-child {
margin: 0;
}
ul {
margin: 0 0 20px;
}
ul:last-child {
margin: 0;
}
a {
color: var(--gp-primary-color);
text-decoration: none;
transition: all 0.4s;
box-shadow: inset 0 -0.4em 0 0 var(--gp-tertiary-color);
}
a:hover {
box-shadow: inset 0 -1.1em 0 0 var(--gp-tertiary-color);
}
a:focus-visible {
outline-style: solid;
outline-width: 1px;
}
.gp-highlight {
color: var(--gp-secondary-color);
}
img {
max-width: 100%;
height: auto;
}

/*--------------------------------------------------------------
General Styling - Form
--------------------------------------------------------------*/

/* Fields */
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 10px 14px;
background: var(--gp-tertiary-color);
border: 0;
border-radius: 10px;
color: #000;
font-family: "Work Sans", Arial, sans-serif;
color: #000;
font-size: 20px;
line-height: 1;
font-weight: 350;
font-optical-sizing: auto;
text-rendering: optimizeSpeed;
border: 2px solid transparent;
}
textarea {
line-height: 26px;
min-height: 400px;
}
input:focus,
textarea:focus {
border-color: var(--gp-primary-color);
}
label { 
display: block;  
font-weight: 500;
font-size: 18px;
line-height: 24px;
margin-bottom: 10px;
}

/* Buttons */
.gp-button {
display: block;
position: relative;
overflow: hidden;
width: 320px;
margin: 0 auto;
padding: 24px 60px;
background: var(--gp-secondary-color);
color: #fff;
font-size: 20px;
line-height: 20px;
letter-spacing: -.7px;
border-radius: 50px;
text-align: center;
vertical-align: middle;
transition: all 700ms ease;
border: 0;
letter-spacing: 0;
box-shadow: none;
cursor: pointer;
}
.gp-button:hover {
color: #fff;
box-shadow: none;
}
.gp-button__text {
display: flex;
position: relative;
z-index: 2;
justify-content: center;
align-items: center;
}
.gp-button__text svg {
margin: 0 0 0 10px;
}
.gp-button__blobs {
height: 100%;
filter: url(#goo);
overflow: hidden;
position: absolute;
top: 0;
left: 0;
bottom: -3px;
right: -1px;
z-index: 1;
}
.gp-button__blobs div {
background-color: var(--gp-primary-color);
width: 34%;
height: 100%;
border-radius: 100%;
position: absolute;
transform: scale(1.5) translateY(125%) translateZ(0);
transition: all 700ms ease;
}
.gp-button__blobs div:nth-child(1) {
left: -5%;
}
.gp-button__blobs div:nth-child(2) {
left: 30%;
transition-delay: 60ms;
}
.gp-button__blobs div:nth-child(3) {
left: 66%;
transition-delay: 25ms;
}
.gp-button:hover .gp-button__blobs div {
transform: scale(1.5) translateY(0) translateZ(0);
}
	

/*--------------------------------------------------------------------------------------

Page Wrapper

--------------------------------------------------------------------------------------*/

.gp-page-wrapper {
opacity: 0;
position: relative;
width: 100%;
padding: 0 30px;
margin: 0 auto;
}
	

/*--------------------------------------------------------------------------------------

Header

--------------------------------------------------------------------------------------*/

.gp-header {
position: relative;
z-index: 3;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 30px 0 30px 0;
}
.home .gp-header {
position: absolute;
top: 0;
left: 0;
padding-left: 30px;
padding-right: 30px;
}

/*--------------------------------------------------------------
Logo
--------------------------------------------------------------*/

.gp-logo {
position: relative;
z-index: 3;
}
.gp-logo svg {
position: relative;
width: 40px;
fill: var(--gp-primary-color);
top: 0;
transition: top 0.4s ease;
}
.gp-logo a {
box-shadow: none;
}
.gp-logo a:hover svg {
top: -10px;
box-shadow: none;
}

/*--------------------------------------------------------------
Nav
--------------------------------------------------------------*/

.gp-desktop-menu-ul {
display: none;
list-style: none;
padding: 0;
}
.gp-desktop-menu-ul > li {
position: relative;
margin: 0;
padding: 0;
}
.gp-desktop-menu-ul > li > a {
display: block;
padding: 25px 20px;
color: var(--gp-primary-color);
font-size: 18px;
line-height: 18px;
font-weight: 400;
box-shadow: none;
}
.gp-desktop-menu-ul > li:last-child > a {
padding-right: 0;
}
.gp-desktop-menu-ul > li > a:after {
content: '';
display: block;
margin-top: 10px;
opacity: 0;
transition: opacity 0.4s;  
border-bottom: 2px solid transparent;
}
.gp-desktop-menu-ul > li:not(.menu-item-has-children) > a:after,
.gp-desktop-menu-ul > li.current-menu-item > a:after,
.gp-desktop-menu-ul > li.current-menu-ancestor > a:after {
border-bottom: 2px solid var(--gp-secondary-color);
}
.gp-desktop-menu-ul > li > a:hover:after,
.gp-desktop-menu-ul > li.current-menu-item > a:after,
.gp-desktop-menu-ul > li.current-menu-ancestor > a:after {
opacity: 1;
}
.gp-desktop-menu-ul > li.current-menu-item:hover > a:after,
.gp-desktop-menu-ul > li.current-menu-ancestor:hover > a:after {
opacity: 0;
}

/*--------------------------------------------------------------
Nav - Submenu
--------------------------------------------------------------*/

.gp-desktop-menu-ul .sub-menu {
display: none;
list-style: none;
position: absolute;
width: 240px;
top: auto;
left: 0;
margin-top: -10px;
background: var(--gp-primary-color);
padding: 30px;
border-radius: 10px;
}
.gp-desktop-menu-ul .menu-item-1000002856 .sub-menu {
left: auto;
right: -20px;
}
.gp-desktop-menu-ul .sub-menu:after {
content:'';
position: absolute;
top: 0;
left: auto;
margin-top: -15px;
width: 0;
z-index: 1;
height: 0;
border-bottom: solid 15px var(--gp-primary-color);
border-left: solid 15px transparent;
border-right: solid 15px transparent;
}
.gp-desktop-menu-ul .menu-item-1000002856 .sub-menu:after {
right: 30px;
}
.gp-desktop-menu-ul li:hover > .sub-menu {
display: block;
}
.gp-desktop-menu-ul .sub-menu li {
margin-bottom: 20px;
font-size: 16px;
line-height: 21px;
}
.gp-desktop-menu-ul .sub-menu li:last-child {
margin-bottom: 0;
}
.gp-desktop-menu-ul .sub-menu a {
color: #fff;
box-shadow: none;
}
.gp-desktop-menu-ul .sub-menu a:hover {
color: var(--gp-tertiary-color);
}

/*--------------------------------------------------------------
Mobile Nav
--------------------------------------------------------------*/

.gp-mobile-menu-icon {
position: relative;
z-index: 3;
cursor: pointer;
}
.gp-mobile-menu-bar-1, 
.gp-mobile-menu-bar-2,
.gp-mobile-menu-bar-3 {
width: 35px;
height: 3px;
background-color: var(--gp-primary-color);
margin: 6px 0;
transition: 0.4s;
border-radius: 3px;
}
.gp-mobile-menu-active .gp-mobile-menu-bar-1 {
transform: translate(0, 8px) rotate(-45deg);
}
.gp-mobile-menu-active .gp-mobile-menu-bar-2 {
opacity: 0;
}
.gp-mobile-menu-active .gp-mobile-menu-bar-3 {
transform: translate(0, -10px) rotate(45deg);
}

.gp-mobile-menu-ul {
display: none;
position: absolute;
z-index: 2;
background: #fff;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 160px 30px 30px 30px;
list-style: none;
}
.gp-mobile-menu-ul > li {
padding: 10px 0;
}
.gp-mobile-menu-ul > li a {
color: var(--gp-primary-color);
font-size: 28px;
line-height: 38px;
box-shadow: none;
}
.gp-mobile-menu-ul li a:hover {
color: var(--gp-secondary-color);
}
.gp-mobile-menu-ul li svg {
position: relative;	
top: 3px;
cursor: pointer;
}

.gp-mobile-menu-ul .sub-menu {
display: none;
list-style: none;
padding: 20px 0 0 20px;
}
.gp-mobile-menu-ul .sub-menu li {
position: relative;
padding: 10px 0;
}
.gp-mobile-menu-ul .sub-menu a {
color: var(--gp-primary-color);
font-size: 24px;
line-height: 34px;
box-shadow: none;
}
.gp-dropdown-icon {
margin-left: 10px;
transition: 0.4s;
}
.gp-active .gp-dropdown-icon {
transform: translate(0, 0) rotate(-180deg);
}


/*--------------------------------------------------------------------------------------

Content Styling

--------------------------------------------------------------------------------------*/

.gp-content-wrapper {
margin-top: 50px;
}
.home .gp-content-wrapper {
margin-top: 0;
}
.gp-border-title {
display: inline-block;
}
.gp-border-title:after {
display: block;
content: '';
margin-top: 10px;
border-bottom: 2px solid var(--gp-secondary-color);
width: 50%;
}
.gp-subtitle {
margin: 0 0 90px 0;
font-size: 30px;
line-height: 42px;
letter-spacing: -1.5px;
font-weight: 500;
}

.gp-divider {
display: flex;
justify-content: center;
width: 100%;
clear: both;
margin: 0 0 90px 0;
}
.gp-divider__inner {
width: 200px;    
height: 15px;
background: var(--gp-tertiary-color);
}

.gp-paragraph ul {
margin: 0 0 35px;
}

.gp-quote {
display: flex;
margin: 0 0 20px 0;
padding: 30px;
background: var(--gp-tertiary-color);
border-radius: 10px;
}
.gp-quote__symbol {
display: none;
margin: -15px 15px 0 -15px;
opacity: 0.2;
}
.gp-quote__symbol svg {
width: 150px;
height: auto;
}
.gp-quote__quote {
margin-bottom: 30px;
font-size: 20px;
line-height: 40px;
}
.gp-quote__name {
font-size: 16px;
line-height: 22px;
font-weight: 400;
color: var(--gp-secondary-color);
}


/*--------------------------------------------------------------------------------------

Home

--------------------------------------------------------------------------------------*/

/*--------------------------------------------------------------
Home - Header
--------------------------------------------------------------*/

.gp-home-header-outer {
position: relative;
width: 100vw;
margin-left: -50vw;
left: 50%;
background: linear-gradient(to top, #fff 0%, #8ce4ff 100%);
padding: 160px 0 90px 0;
}
/*REMOVE.gp-home-header-outer:after {
content: '';
display: block;
width: 100%;
height: 28px;
position: absolute;
bottom: 0;
background: url(./assets/images/home-header-bottom.png) repeat-x;
}*/
.gp-home-header-inner {
width: 100%;
margin: 0 auto;
padding: 0 30px;
}	
.gp-home-header-inner h1 {
position: relative;
z-index: 1;
font-size: 50px;
line-height: 60px;
letter-spacing: -1.5px;
font-weight: 600;
color: var(--gp-primary-color);
}
.gp-clouds {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

/*--------------------------------------------------------------
Home - Clouds
--------------------------------------------------------------*/

@-webkit-keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }
    100% {
        margin-left: 100%;
    }
}
@-moz-keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }
    100% {
        margin-left: 100%;
    }
}
@keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }
    100% {
        margin-left: 100%;
    }
}
.x1 {
-webkit-animation: animateCloud 35s linear infinite;
-moz-animation: animateCloud 35s linear infinite;
animation: animateCloud 35s linear infinite;
-webkit-transform: scale(0.65);
-moz-transform: scale(0.65);
transform: scale(0.65);
}
.x2 {
-webkit-animation: animateCloud 20s linear infinite;
-moz-animation: animateCloud 20s linear infinite;
animation: animateCloud 20s linear infinite;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
}
.x3 {
-webkit-animation: animateCloud 30s linear infinite;
-moz-animation: animateCloud 30s linear infinite;
animation: animateCloud 30s linear infinite;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5);
}
.x4 {
-webkit-animation: animateCloud 18s linear infinite;
-moz-animation: animateCloud 18s linear infinite;
animation: animateCloud 18s linear infinite;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
}
.x5 {
-webkit-animation: animateCloud 25s linear infinite;
-moz-animation: animateCloud 25s linear infinite;
animation: animateCloud 25s linear infinite;
-webkit-transform: scale(0.55);
-moz-transform: scale(0.55);
transform: scale(0.55);
}
.cloud {
background: #fff;
background: linear-gradient(top,  #fff 5%,#f1f1f1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1',GradientType=0 );
border-radius: 100px;
height: 120px;
position: relative;
width: 350px;
}
.cloud:after, .cloud:before {
background: #fff;
content: '';
position: absolute;
z-indeX: -1;
}
.cloud:after {
border-radius: 100px;
height: 100px;
left: 50px;
top: -50px;
width: 100px;
}
.cloud:before {
border-radius: 200px;
width: 180px;
height: 180px;
right: 50px;
top: -90px;
}

/*--------------------------------------------------------------
Home - Intro
--------------------------------------------------------------*/

.gp-intro {
display: flex;
align-items: center;
flex-direction: column;
gap: 80px;
margin-bottom: 140px;
font-size: 26px;
line-height: 40px;
letter-spacing: -1px;
}
.gp-intro__text {
width: 100%;
}
.gp-intro .gp-highlight {
margin-bottom: 5px;
font-size: 38px;
line-height: 62px;
font-weight: 500;
}
.gp-intro__button {
display: flex;
justify-content: center;
width: 100%;
}
.gp-intro__button .gp-button {
width: 300px;
min-width: auto;
}

/*--------------------------------------------------------------
Home - Home Sections
--------------------------------------------------------------*/

.gp-home-section  {
margin-bottom: 150px;
}
.gp-home-section:last-child {
margin-bottom: 0;
}
.gp-home-section > p {
font-size: 22px;
line-height: 34px;
letter-spacing: -0.7px;
margin-bottom: 36px;
}

/*--------------------------------------------------------------
Home - Services
--------------------------------------------------------------*/

.gp-services-section h2 {
margin-bottom: 40px;
}
.gp-services {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.gp-service {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
padding: 30px;
border-radius: 10px;
border: 4px solid var(--gp-tertiary-color);
}
.gp-service--text h3 {
margin-bottom: 20px;
font-size: 32px;
line-height: 42px;
font-weight: 500;
letter-spacing: -1px;
color: var(--gp-primary-color);
}
.gp-service--text p {
margin-bottom: 30px;
font-size: 20px;
line-height: 30px;
letter-spacing: -0.7px;
}
.gp-find-out-more {
font-size: 18px;
line-height: 1;
font-weight: 400;
letter-spacing: -0.7px;
box-shadow: none;
}
.gp-find-out-more:hover {
box-shadow: none;
}
.gp-find-out-more span {
transition: box-shadow 0.4s ease-in-out;
box-shadow: inset 0 -0.4em 0 0 var(--gp-tertiary-color);
}
.gp-find-out-more:hover span {
box-shadow: inset 0 -1.1em 0 0 var(--gp-tertiary-color);
}
.gp-find-out-more svg {
position: relative;
top: 7px;
}

/*--------------------------------------------------------------------------------------

Contact Page

--------------------------------------------------------------------------------------*/

.gp-contact {
display: flex;
flex-direction: column;
}

/* Details */
.gp-contact__details {
margin-bottom: 40px;
}
.gp-contact__title {
margin-bottom: 10px;
font-size: 18px;
line-height: 1;
font-weight: 400;
letter-spacing: -0.7px;
color: var(--gp-secondary-color);
}
.gp-contact__details .gp-divider {
margin-bottom: 40px;
}

/* Form */
.gp-contact__form {
width: 100%;
}
.wpforms-hidden {
display: none;
}
.wpforms-field {
margin-bottom: 20px;
}
.wpforms-required-label {
color: var(--gp-secondary-color);
}
.wpforms-has-error input,
.wpforms-has-error textarea {
border-color: var(--gp-secondary-color);
}
.wpforms-error {
font-size: 14px;
line-height: 1;
color: var(--gp-secondary-color);
font-style: normal;
}
.wpforms-confirmation-container {
padding: 30px;
background: var(--gp-tertiary-color);
border-radius: 10px;
}
.wpforms-submit:hover {
background: var(--gp-primary-color);
}
.wpforms-container img {
display: none !important;
}


/*--------------------------------------------------------------------------------------

Portfolio Page

--------------------------------------------------------------------------------------*/

/* Portfolio - Filters */
.gp-portfolio__filters {
margin-bottom: 50px;
}
.gp-portfolio__filter-link {
display: inline-block;
margin: 0 50px 10px 0;
font-size: 18px;
line-height: 1;
font-weight: 500;
box-shadow: none;
cursor: pointer;
transition: all 0.4s;
}
.gp-portfolio__filter-link:hover,
.gp-portfolio__filter-link.gp-active {
color: var(--gp-secondary-color);
box-shadow: none;
}
.gp-portfolio__filter-link:last-child {
margin-right: 0;
}

/* Portfolio - Items */
.gp-portfolio__items {
position: relative;
width: 100%;
}
.gp-portfolio__items-inner {
display: flex;
flex-wrap: wrap;
width: 100%;
column-gap: 40px;
row-gap: 40px;
}
.gp-portfolio__item {
width: 100%;
}
.gp-portfolio__item-title {
font-size: 24px;
line-height: 30px;
font-weight: 500;
box-shadow: none;
}
.gp-portfolio__item-title {
margin: 10px 0 0 0;
font-size: 24px;
line-height: 30px;
font-weight: 500;
}
.gp-portfolio__item-image {
display: block;
overflow: hidden;
border-radius: 10px;
line-height: 0;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
}
.gp-portfolio__item-image:hover {
box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
}
.gp-portfolio__item-image img {
width: 100%;
height: auto;
border-radius: 10px;
transition: all 1s ease;
}
.gp-portfolio__item-image:hover img {
transform: scale(1.1);
}

/* Portfolio - Item Loader */
.gp-portfolio__logo {
display: none;
position: absolute;
opacity: 0.5;
left: 50%;
transform: translateX(-50%);
animation: MoveUpDown 1s linear infinite;
}
@keyframes MoveUpDown {
0%, 100% {
top: 0;
}
50% {
top: 100px;
}
}


/*--------------------------------------------------------------------------------------

Portfolio Page

--------------------------------------------------------------------------------------*/

/* Portfolio Post -  Title ************************************/

.gp-portfolio-post-title {
margin-bottom: 40px;
}

/* Portfolio Post - Image ************************************/

.gp-portfolio-image {
display: block;
margin: 0 0 80px 0;
line-height: 0;
border-radius: 10px;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
}

/* Portfolio Post - Slider ************************************/

.gp-portfolio-slider {
position: relative;
zoom: 1;
margin: 0 0 80px 0;
border-radius: 10px;
}
.flex-viewport {
border-radius: 10px;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
}
.slides {
margin: 0;
padding: 0;
zoom: 1;
list-style-type: none;
line-height: 1;
border-radius: 10px;
}
html[xmlns] .slides {
display: block;
}
* html .slides {
height: 1%;
}
.slides:after {
content: "\0020";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.gp-portfolio-slide {
position: relative;
display: none;
margin: 0;
padding: 0;
list-style-type: none;
backface-visibility: hidden;
border-radius: 10px;
line-height: 0;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
}
.gp-portfolio-slide img {
width: 100%;
height: auto;
line-height: 0;
border-radius: 10px;
}

/* Portfolio Post - Thumbnails Nav */
.flex-control-thumbs {
display: flex;
width: 100%;
margin: 0;
list-style: none;
justify-content: center;
}
.flex-control-thumbs li {
position: relative;
margin: 20px 5px 0 5px;
padding: 0;
line-height: 0;
}
.flex-control-thumbs img {
width: 75px;
height: auto;
line-height: 0;
border-radius: 10px;
cursor: pointer;
border: 4px solid transparent;
}
.flex-control-thumbs img.flex-active {
border-color: var(--gp-secondary-color);
}

/* Portfolio Post - Directional Nav */
.flex-direction-nav {
display: flex;
position: absolute;
z-index: 99;
width: 100%;
top: 50%;
transform: translateY(-50%);
margin: -30px 0 0 0;
padding: 0;
list-style: none;
justify-content: space-between;
}
.flex-direction-nav .flex-nav-prev {
margin-left: 20px;
}
.flex-direction-nav .flex-nav-next {
margin-right: 20px;
}
.flex-direction-nav a {
display: flex;
width: 40px;
height: 40px;
background: rgba(0,0,0,0.5);
text-align: center;
cursor: pointer;
border-radius: 50%;
align-items: center;
justify-content: center;
box-shadow: none;
}
.flex-direction-nav .gp-icon {
stroke: #fff;
width: 24px;
height: 24px;
}
.flex-direction-nav a:hover {
background: rgba(0,0,0,0.8);
}
.flex-direction-nav .flex-disabled {
opacity: 0.2;
cursor: auto;	
pointer-events: none;
}

/* Portfolio Post - Content ************************************/

.gp-portfolio-content {
display: flex;
flex-direction: column;
gap: 30px;
}
.gp-portfolio-content h2 {
margin-bottom: 10px;
font-size: 36px;
line-height: 46px;
font-weight: 600;
letter-spacing: -1px;
}
.single-portfolio .gp-button__text svg {
margin: 0 10px 0 0;
order: -1;
}


/*--------------------------------------------------------------------------------------

Themes Page

--------------------------------------------------------------------------------------*/

.gp-theme__items-inner {
display: flex;
flex-direction: column;
gap: 80px;
}
.gp-theme__item {
display: flex;
flex-direction: column;
gap: 30px;
}
.gp-theme__item-image {
width: 100%;
box-shadow: none;
border-radius: 10px;
}
.gp-theme__item-image:hover {
box-shadow: none;
}
.gp-theme__item-image img {
box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.gp-theme__content {
width: 100%;
}
.gp-theme__content h3 {
font-size: 30px;
line-height: 36px;
}
.gp-theme__content p {
font-size: 18px;
line-height: 28px;
margin: 0 0 20px 0;
}
.gp-theme__item-buttons {
display: flex;
gap: 20px;
}
.gp-theme__content .gp-button {
font-size: 18px;
padding: 14px 0px;
width: 140px;
margin: 0;
}
.gp-theme__content .gp-button svg {
width: 18px;
height: auto;
margin-top: -3px;
margin-left: 5px;
}


/*--------------------------------------------------------------------------------------

Privacy Page

--------------------------------------------------------------------------------------*/

.gp-page-text h2 {
font-size: 32px;
line-height: 42px;
margin-bottom: 10px;
letter-spacing: -1px;
}

/*--------------------------------------------------------------------------------------

Error 404

--------------------------------------------------------------------------------------*/

.error404 h1 {
margin: 0;
font-size: 100px;
line-height: 1;
font-weight: 700;
text-align: center;
}
.error404 h2 {
font-size: 40px;
line-height: 1;
font-weight: 600;
text-align: center;
}
.error404 .gp-content-wrapper {
text-align: center;
}
.gp-error-404-logo {
display: inline-block;
position: relative;
}
.gp-error-404-logo__ghost {
opacity: 0.2;
width: 340px;    
max-width: 100%;
transform: rotate(45deg);
margin: 0 auto;
padding: 0 40px 40px 40px;
text-align: center;
fill: var(--gp-primary-color);
}


/*--------------------------------------------------------------------------------------

Footer

--------------------------------------------------------------------------------------*/

.gp-footer {
margin-top: 150px;
position: relative;
display: inline-grid;  
width: 100%; 
grid-template-columns: 140px calc(100% - 140px);
grid-template-rows: 1fr 1fr 0.5fr;
padding-bottom: 10px;
align-items: end;
}

/*--------------------------------------------------------------
Footer - Logo
--------------------------------------------------------------*/

.gp-footer-logo {
grid-column-start: 1;
grid-row: 1 / span 3;
}
.gp-footer-logo svg {
position: relative;
width: 120px;
top: 0;
transition: top 0.4s ease;
fill: var(--gp-primary-color);
}
.gp-footer-logo a {
box-shadow: none;
}
.gp-footer-logo a:hover svg {
top: -10px;
box-shadow: none;
}
.gp-footer-copyright {
margin-top: 20px;
padding-bottom: 30px;
font-size: 14px;
line-height: 1;
letter-spacing: -0.4px;
font-weight: 400;
text-align: center;
}
.gp-footer-copyright a {
margin-left: 30px;
}

/*--------------------------------------------------------------
Footer - Bubbles
--------------------------------------------------------------*/

.gp-footer-bubble {
position: relative;
background: var(--gp-tertiary-color);
padding: 30px;
border-radius: 10px;
line-height: 1;
}
.gp-footer-bubble:after {
content: '';
position: absolute;
width: 0;
height: 0;
border: 30px solid transparent;
border-bottom: 0;
}
.gp-footer-bubble__title {
margin-bottom: 10px;
font-size: 18px;
line-height: 1;
font-weight: 450;
letter-spacing: -0.7px;
color: var(--gp-secondary-color);
}

/*--------------------------------------------------------------
Footer - Email
--------------------------------------------------------------*/

.gp-footer-email {
grid-column: 1 / span 2;
grid-row-start: 1;
margin-bottom: 30px;
}
.gp-footer-email .gp-footer-bubble:after {
bottom: 0;
left: 60px;
border-top-color: var(--gp-tertiary-color);
border-bottom: 0;
border-left: 0;
margin-left: -10px;
margin-bottom: -20px;
border-bottom-right-radius: 5px;
}
.gp-footer-bubble__email {
word-wrap: break-word;
color: var(--gp-primary-color);
font-size: 18px;
line-height: 1;
}
.gp-footer-bubble__email:hover {
color: var(--gp-secondary-color);
}

/*--------------------------------------------------------------
Footer - Social
--------------------------------------------------------------*/

.gp-footer-social {
grid-column-start: 2;
grid-row-start: 2;
}
.gp-footer-social .gp-footer-bubble {
margin-left: 20px;
}
.gp-footer-social .gp-footer-bubble:after {
top: 50%;
left: 0;
border-right-color: var(--gp-tertiary-color);
border-left: 0;
margin-top: -15px;
margin-left: -24px;
border-bottom-left-radius: 5px;
}
.gp-footer-bubble__button {
border-radius: 50%;
background: var(--gp-primary-color);
fill: #fff;
display: inline-flex;
color: #fff;
width: 35px;
height: 35px;
align-items: center;
justify-content: center;
box-shadow: none;
}
.gp-footer-bubble__button:hover {
background: var(--gp-secondary-color);
color: #fff;
box-shadow: none;
}
.gp-footer-bubble__button svg {
width: 20px;
height: auto;
}

/*--------------------------------------------------------------------------------------

Media queries

--------------------------------------------------------------------------------------*/

@media only screen and (min-width: 500px) { 

	.error404 h1 {
	font-size: 150px;
	}
	.error404 h2 {
	font-size: 52px;
	}

	.gp-footer {
	width: auto; 
	}

}

@media only screen and (min-width: 600px) { 

	.gp-portfolio__item {
	width: calc((100% - 40px ) / 2);
	}

	.flex-control-thumbs li {
	margin: 20px 10px 0 10px;
	}
	.flex-control-thumbs img {
	width: 150px;
	}
	.flex-direction-nav {
	margin-top: -60px;
	}

}

/* Medium and above */
@media only screen and (min-width: 768px) {

	h1 {
	font-size: 48px;
	line-height: 60px;
	}
	h2 {
	font-size: 48px;
	line-height: 60px;
	}
	h3 {
	font-size: 44px;
	line-height: 54px;
	}

	.gp-quote__quote {
	font-size: 24px;
	line-height: 44px;
	}

	body:not(.gp-mobile-menu-active) .gp-mobile-menu-icon {
	display: none;
	}
	body:not(.gp-mobile-menu-active) .gp-desktop-menu-ul {
	display: flex;
	}
	.gp-mobile-menu-ul {
	display: none;
	}

	.gp-subtitle {
	width: 70%;
	font-size: 40px;
	line-height: 52px;
	border-width: 5px;
	}

	.gp-intro {
	font-size: 36px;
	line-height: 60px;
	}
	.gp-intro .gp-highlight {
	font-size: 48px;
	line-height: 72px;
	}
	
	.gp-home-section > p {
	font-size: 24px;
	line-height: 36px;
	}

	.gp-service {
	width: calc(50% - 10px);
	}
	.gp-service--text h3 {
	font-size: 36px;
	line-height: 46px;
	}
	
	.gp-contact {
	flex-direction: row;
	}
	.gp-contact__details {
	margin: 0 100px 0 0;
	}

	.error404 h1 {
	font-size: 200px;
	}
	
	.gp-footer {
	width: 100%; 
	grid-template-columns: 1fr 230px 1fr;
	grid-template-rows: 1fr;
	align-items: start;
	justify-items: center;
	}
	.gp-footer-logo {
	grid-column-start: 2;
	grid-row: 1;
	}
	.gp-footer-email {
	justify-self: end;
	grid-column: 1 / span 1;
	grid-row: 1;
	margin: 0;
	}
	.gp-footer-email .gp-footer-bubble:after {
	right: 0;
	left: auto;
	top: 50%;
	width: 0;
	height: 0;
	border: 30px solid transparent;
	border-left-color: var(--gp-tertiary-color);
	border-right: 0;
	border-bottom: 0;
	margin-top: -15px;
	margin-right: -24px;
	}	
	.gp-footer-social {
	justify-self: start;
	grid-column-start: 3;
	grid-row: 1;
	}
	.gp-footer-social .gp-footer-bubble {
	margin: 0;
	}

		

}

/* Small and above */
@media only screen and (min-width: 783px) {

	.gp-home-header-inner h1 {
	font-size: 80px;
	line-height: 100px;
	letter-spacing: -3px;
	}

}

/* Large and above */
@media only screen and (min-width: 992px) {

	.gp-content-wrapper {
	margin-top: 100px;
	}
	
	.gp-quote {
	margin: 0 80px 20px 80px;
	padding: 50px;
	}
	.gp-quote__symbol {
	display: block;
	}

	.gp-home-header-outer {
	padding: 220px 0 130px 0;
	}

	.gp-intro {
	flex-direction: row;
	}
	.gp-intro__text {
	width: 75%;
	}
	.gp-intro__button {
	width: 25%;
	}
	.gp-intro__button .gp-button {
	width: 100%;
	}

	.gp-contact__details {
	margin: 0 225px 0 0;
	}

	.gp-theme__item {
	flex-direction: row;
	}
	.gp-theme__item-image {
	width: calc((100% - 30px) / 2);
	}
	.gp-theme__content {
	width: calc((100% - 30px) / 2)
	}

}

/* 1060px and above */
@media only screen and (min-width: 1060px) {
	
	.gp-page-wrapper,
	.gp-home-header-inner {
	width: var(--gp-content-width);
	}

	.gp-home-header-inner h1 {
	font-size: 100px;
	line-height: 120px;
	letter-spacing: -3px;
	}

	.gp-clouds svg:nth-child(1) {
	display: block;
	width: 300px;
	height: auto;
	fill: #fff;
	position: absolute;
	top: 30%;
	left: 60px;
	}
	.gp-clouds svg:nth-child(2) {
	display: block;
	width: 200px;
	height: auto;
	fill: #fff;
	position: absolute;
	bottom: 60px;
	right: 400px;
	}
	.gp-clouds svg:nth-child(3) {
	display: block;
	width: 300px;
	height: auto;
	fill: #fff;
	position: absolute;
	top: 100px;
	right: 60px;
	}

}