/*!
Theme Name: Ellis Digital Theme
Author: Ellis Digital
Description: Based in Guildford, Surrey, we are an award-winning digital marketing and creative agency with a small team of talented individuals that are creative, analytical and passionate about what we do. Since we started out in 2015, we have continued to grow as a digital marketing agency, yet have maintained our dynamic approach, allowing flexibility to undertake any urgent pieces of work. Call 01483 912900 if you need any assistance and please visit www.ellis.digital.
Version: 1.3.0
Text Domain: ellis digital
*/

:root {
    --white: #F8F8F3;
    --black: #000;
    --orange: #F26D21;
    --navy: #072F41;
    --mint: #A6D7A3;
}

html {
    margin: 0;
    padding: 0;
    font-family: "Inclusive Sans", sans-serif;
    background: var(--white);
}

body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

.wrap {
    max-width: 1440px;
    margin: auto;
    width: 90vw;
}

h1,h2,h3,h4,h5,h6,p,a,li,ul {
    margin: 0;
    padding: 0;
}

button.button, a.button {
    display: flex;
    padding: 24px 36px;
    justify-content: center;
    align-items: center;
    gap: 18px;
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
    border-radius: 100px;
    text-decoration: none;
    position: relative;
    transition: ease 0.4s;
    overflow: hidden;
}

button.button span, a.button span {
    position: relative;
    z-index: 1;
}

button.button:after,  
a.button:after {
    width: 30%;
    height: 100%;
    position: absolute;
    content: '';
    z-index: 0;
    border-radius: 100px;
    transition: ease 0.4s;
    left: -30%;
}

button.button:hover:after, 
a.button:hover:after {
    width: 130%;
}

button.button svg, a.button svg {
    z-index: 1;
    position: relative;
}

/* White Button */

button.button.white, 
a.button.white {
    background-color: var(--white);
    color: var(--navy);
}

button.button.white:hover, 
a.button.white:hover {
    color: var(--white);
}

button.button.white:after, 
a.button.white:after {
    background: var(--navy);
}

button.button.white:hover svg path,
a.button.white:hover svg path {
    stroke: #F8F8F3;
}

button.button.white svg path,
a.button.white svg path {
    transition: ease 0.4s;
}

/* Mint Button */

button.button.mint, 
a.button.mint {
    background-color: var(--mint);
    color: var(--navy);
}

button.button.mint:hover, 
a.button.mint:hover {
    color: var(--mint);
}

button.button.mint:after, 
a.button.mint:after {
    background: var(--navy);
}

button.button.mint:hover svg path,
a.button.mint:hover svg path {
    stroke: var(--mint);
}

button.button.mint svg path,
a.button.mint svg path {
    transition: ease 0.4s;
}

/* White Orange */

button.button.white-orange, 
a.button.white-orange {
    background-color: var(--white);
    color: var(--orange);
}

button.button.white-orange:hover, 
a.button.white-orange:hover {
    color: var(--white);
}

button.button-orange.white:after, 
a.button.white-orange:after {
    background: var(--orange);
}

button.button.white-orange:hover svg path,
a.button.white-orange:hover svg path {
    stroke: #F8F8F3;
}

button.button.white-orange svg path,
a.button.white-orange svg path {
    transition: ease 0.4s;
}

/* Fade in animations */

.left {
    position: relative;
    transform: translateX(-50px);
    opacity: 0;
    transition: 1s all ease;
}
  
.left.active {
    transform: translateX(0);
    opacity: 1;
}

.right {
    position: relative;
    transform: translateX(50px);
    opacity: 0;
    transition: 1s all ease;
}
  
.right.active {
    transform: translateX(0);
    opacity: 1;
}

.top {
    position: relative;
    transform: translateY(-50px);
    opacity: 0;
    transition: 1s all ease;
}
  
.top.active {
    transform: translateY(0);
    opacity: 1;
}

.bottom {
    position: relative;
    transform: translateY(50px);
    opacity: 0;
    transition: 1s all ease;
}
  
.bottom.active {
    transform: translateY(0);
    opacity: 1;
}

/* Hide entire header and footer on specific pages */
body.hide-menus header.desktop,
body.hide-menus header.mobile {
    display: none !important;
}

body.hide-menus footer {
    display: none !important;
}