@charset "UTF-8";
/* Sustainable Sidekicks by No Lesser Panda----------------------------*/

/*
Author: Colin Reilly - nolesserpanda.com
Description: Styling for Sustainable Sidekicks.
Version: 0.0.1
Rev Notes: First Revision
*/


/*------------Master settings-------------*/

*, *::before, *::after{box-sizing: border-box;}

body{
    background-color: var(--col-white);
    margin: 0;
    font-family: sans-serif;
    font-size:1.2rem;
    width:100%;
    overflow-x: hidden;
}

p{line-height: 1.7rem;}

li{line-height: 2.2rem;}

img{
    display: block;
    position: relative;
}

/*------------Colour Variables-------------*/

:root{
    --col-white: #fafff0;
    --col-orange: #f93;
    --col-blue: #036;
    --col-pink: #ff528b;
    --col-turq: #3fc;
}


/*------------Z-Index-------------*/

.z4{z-index:4}
.z3{z-index:3}
.z2{z-index:2}
.z1{z-index:1}

.zn1{z-index:-1}
.zn2{z-index:-2}


/*------------Main Containers-------------*/

.container{
    position:relative;
    width: 100%;
}

.gutters, .wide-gutters{
    margin-inline: auto;
    position: relative;
}

.gutters{max-width: 1000px; width: 90%;}

.wide-gutters{max-width: 1100px; width: 95%;}

.grid-text-left, .grid-text-right{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.grid-text-left{
    flex-direction: column-reverse;
}

.grid-text-img, .grid-text-img-small{
    object-fit: cover;
    border-radius: 50%;
    width: 80%;
    margin-inline: auto;
    min-width: 240px;
}

@media screen and (min-width:800px) {
    .grid-text-left{
        display: grid;
        grid-template-columns: 70% 30%;
    }

    .grid-text-right{
        display: grid;
        grid-template-columns: 30% 70%;
    }

    .grid-text-img{
        width: 100%;
        object-fit: cover;
        border-radius: 50%;
        padding: 1.5rem;
    }

    .grid-text-img-small{
        width: 60%;
        min-width: 120px;
    }
}

/*------------Generic Sections-------------*/

.orange-section{background-color: var(--col-orange);}
.turq-section{background-color: var(--col-turq);}
.pink-section{background-color: var(--col-pink);}

/*Current versions of chrome sometimes render a white line at the bottom of the SVG images for some reason, this hides the gap*/
.chrome-fix{
    position: absolute;
    top:-1px;
    height: 2px;
    width: 100%;
    z-index:-1;
}


/*------------Generic Alignment-------------*/

.center{text-align: center;}
.right{text-align: right;}

.flex-middle{
    display: inline-flex;
    align-items: center;
}

.top-space{padding-top:4vw;}

.extra-top-space{padding-top:15vw;}


/*------------Font Styling-------------*/

.bold{font-weight: bold;}

.italic{font-style:oblique; margin-inline: 0.3em;}

.extra-pad{padding-block: 0.2rem;}

.pink-text{color: var(--col-pink)}
.blue-text{color: var(--col-blue)}
.white-text{color: var(--col-white)}
.black-text{color: black;}


/*------------ Links styling -------------*/

.links{margin-top:35px; margin-bottom:25px;}

.linkBtn, .ctaBtn, .priceBtn, .pinkBtn{
    display: inline-block;
    width: auto;
    margin: 6px;
    padding:12px;
    border-radius: 4px;
    font-weight: bold;
    text-decoration: none;
}

.linkBtn{
    background-color: var(--col-blue);
    color: var(--col-white);
}

.linkBtn:hover,
.linkBtn:focus
    {background-color: var(--col-pink)}

.pinkBtn{
    background-color: var(--col-pink);
    color: var(--col-white);
}

.pinkBtn:hover,
.pinkBtn:focus
    {background-color: var(--col-blue)}

.ctaBtn{
    background-color: var(--col-turq);
    color: var(--col-black);
}

.catBtn:focus,
.ctaBtn:hover
    {background-color: var(--col-orange);}

.priceBtn{
    background-color: var(--col-orange);
    color: var(--col-black);
}

.priceBtn:hover,
.priceBtn:focus
    {background-color: var(--col-pink)}

/*------------Info Circles-------------*/

.info-circle{
    height: 4rem; 
    width: 4rem; 
    border-radius: 50%; 
    margin-inline: auto;
    display: flex;
    align-content: center;
    justify-content: center;
}

/**************************************************
***            Styling for all pages            ***
***    (Header, Menu, Decorations, Footer)      ***
**************************************************/


/*------------Header section-------------*/

header{
    position: absolute;
    top: 0;
    width: 100%;
}

.logo{
    position: absolute;
    width:35%;
    padding:2.5%;
    min-width:250px;
    z-index:11;
}


/*------------Menu section-------------*/

@media screen and (min-width:800px) {
    .logo{padding: 1%;}
}

.mobiMenu{
    position: absolute;
    top: 8px;
    right:5vw;
    width:9vw;
    z-index:21;
    max-width:50px;
}

#menu-icon{display:block;}
#close-icon{display:none;}

#menu{
    height:100%;
    width:100%;
    position:fixed;
    background-color:rgba(250,255,240,0.98);
    z-index:20;
    top:-150%;
    transition: 1s;
    padding-top:15vw;
}

#menu li{
    width: 90vw;
    border-bottom: 2px solid var(--col-blue);
    padding:16px 0 6px 0;
    list-style-type: none;
}

#menu a{
    color: var(--col-blue);
    text-decoration: none;
    font-size: large;
}

#menu a:hover, #menu a:focus{
    text-decoration: underline;
    color: var(--col-pink);
}

#menu h1{color: var(--col-blue);}

.menu-logo{
    width: 30%;
    margin-inline: auto;
}

@media screen and (min-width:950px) {
    .menu-logo{display: none;}
    #menu h1{display:none;}
    #menu-icon{display:none;}
    #close-icon{display:none;}

    #menu{
        background-color: rgba(250,255,240,0.6);
        height: auto;
        width: 100%;
        top: 0;
        padding:1% 20px;
        position: absolute;
        text-align: right;
        z-index: 10;
        box-sizing: border-box;
        font-weight: bold;
    }

    #menu ul{padding: 0;}

    #menu li{
        width: auto;
        border-bottom: none;
        display: inline-block;
        padding: 0 0.6vw 0 0.6vw;
    }
}

/*------------Email sign-up-------------*/

.signup-box{
    background-color: var(--col-pink);
    padding: 1rem;
}

.signup-box h3{
    color: var(--col-white);
    margin-top: 0;
}

.signup-form{
    padding: 0 1.8rem;
    display: grid;
    grid-template-columns: 40% 40% 20%;
    align-items: flex-end;
}

#email{
    width: 98%;
    border: 2px solid var(--col-blue);
    height: 2.6rem;
    border-radius: 4px;
    padding-left: 1rem;
}

#email:focus{border: 2px solid var(--col-turq);}

#signupBtn{
    background-color: var(--col-blue);
    color: var(--col-white);
    border-radius: 4px;
    border: none;
    font-size: 1.4rem;
    padding: 0.5rem;
    width: 100%;
}

#signupBtn:hover, #signupBtn:focus{
    background-color: var(--col-turq);
    color:black;
}


/*------------Swirly arrows and line decorations-------------*/

.white-arrow{
    position: absolute;
    right:-3vw;
    width:7rem;
    top:2rem;
}

.swirly{
    width:min(800px, 80%);
    margin-inline: auto;
    position: relative; 
}

.swirly-arrow, 
.swirly-arrow2, 
.swirly-arrow3, 
.swirly-arrow4,
.swirly-arrow5,
.swirly-arrow6,
.swirly-arrow7,
.swirly-arrow8,
.swirly-arrow9
    {position:absolute; width: 110%;}

.swirly-arrow{top: -220px;}

.swirly-arrow2{top: -14vw; transform: rotate(184deg);}

.swirly-arrow3{top: -16vw; left: -8vw; transform: rotate(75deg);}

.swirly-arrow4{top: -35vw; transform: rotate(30deg);}

.swirly-arrow5{top: -8vw; right: -35vw; transform: rotate(15deg);}

.swirly-arrow6{top: -2vw; left: 90%; transform: rotate(50deg);}

.swirly-arrow7{top: -10vw; left:60%; transform: rotate(202deg);}

.swirly-arrow8{top: -20vw; left:-90%; transform: rotate(10deg);}

.swirly-arrow9{top: -20vw; left:60%; transform: rotate(170deg);}


/*------------Footer section-------------*/

/*--- Pink circles are kept in 'Info Circles' under generic content ---*/

.footer{
    background-color: var(--col-turq);
    padding: 10px 20px
}

.footer-flex{
    display: flex;
    flex-direction: column-reverse;
}

.footer-logo{
    width:80%;
    margin-inline:auto;
    margin-block:8px;
}

@media screen and (min-width:950px) {
    .footer-flex{
        flex-direction: row;
    }

    .footer-logo{
        width:30%;
        margin-left:auto;
        margin-right: 0;
        margin-block:auto;
    }
}

.small{
    text-align:center;
    font-size: smaller;
    margin-top: 2.4rem;
    margin-bottom: 0;
}

.small a{color: var(--col-pink); text-decoration: none;}

.small a:hover, .small a:focus{color: var(--col-blue);}


/**************************************************
***            Styling for Home Page            ***
**************************************************/


/*------------Intro and splash section-------------*/

.intro{
    background-color: var(--col-orange);
    position: relative;
}

.headline{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    padding-top:25vw;
}

@media screen and (min-width:800px) {
    .headline{padding-top:15vw;}
}

.intro-text h1{font-size: 2.2rem;}

.headline h1 {color:var(--col-blue); font-size:3.5rem;}

.headline p{color:var(--col-pink); font-size:1.9rem;}

.intro-text{width: 100%; padding-top:12vw;}

.intro-image{
    width:52vw;
    border-radius: 50%;
    height: 52vw;
    position: absolute;
    right:8vw;
    top:-38vw;
    z-index: 4;
}

.intro-image img{width: 100%;border-radius: 50%;}

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

    .intro-text {width: 50%; padding-top: 5px;}

    .intro-text p {margin-bottom: 0;}

    .intro-image{
        width:50%;
        height:50%;
        right:-6%;
        top:-34%;
    }
}

.intro .links{
    position:absolute;
    width: 50%;
    text-align: center;
    bottom: -8vw;
}

.help-arrow{
    width:min(800px, 80%);
    margin-top: 2vw;
    margin-left: 45%;
    transform: translateX(-50%);
    position: absolute;
}

.start{
    width:min(800px, 80%);
    margin-inline: auto;
    position: relative;
    padding-block: max(45px, 5vw);
}


/*------------Who are you section-------------*/

.who-are-you{
    background-color: var(--col-turq);
    padding-block: 0 5px;
}

.card-holder{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.card{
    background-color: var(--col-pink);
    border-radius: 20px;
    width: 47%;
    display: inline-block;
    margin-inline: auto;
    color: var(--col-white);
    text-align: center;
    padding:2.5%;
    z-index: 4;
    transition: 0.6s;
    position: relative;
    margin-bottom: 15px;
    transition-delay: 0.1s;
}

@media screen and (min-width:950px) {
    .card-holder{
        flex-direction: row;
        justify-content:space-between;
    }

    .card{
        width: 22%;
        padding:2.5%;
    }
}

.card:hover{
    transform: rotate(4deg) translateY(-10px) scale(1.05) translateX(-5px);
    box-shadow: 4px 6px rgba(0, 0, 0, 0.4);
}

.card-icon{
    width: 85%;
    margin-inline: auto;
}

.card-link{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-decoration: none;
    z-index: 10;
}

.click-to-learn{
    position: absolute;
    left:35%;
    top: -70px;
    z-index: 4;
    width: 60%;
    min-width: 250px;
}

@media screen and (min-width:950px) {
    .click-to-learn{
        left:65%;
        top: -80px;
        width: 40%;
    }
}


/*------------Workshop and talks section-------------*/

.workshops{padding-left: 0px;}

.workshop-title{
    color: var(--col-blue);
    font-size: 2rem;
    margin:2.5rem;
}

.workshop-explore{
    display: none;
}

@media screen and (min-width:950px) {
    .workshops{padding-left: clamp(80px, 12vw, 140px);}

    .workshop-explore{
        display: block;
        position: absolute;
        width: clamp(150px, 15vw, 220px);
        left: -15vw;
    }
}

.circle-holder{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.parent, .circle1, .circle2, .circle3, .circle4, .circle5, .circle6, .circle2 img, .circle4 img, .circle6 img{
    border-radius: 50%;
}

.parent, .circle1, .circle2, .circle3, .circle4, .circle5, .circle6{
    min-width: 160px; 
    width: 28vw;
    min-height: 160px; 
    height: 28vw;
    transition: 0.8s;
    transition-delay: 0.1s;
    color: var(--col-white);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

@media screen and (min-width:950px) {
    .parent, .circle1, .circle2, .circle3, .circle4, .circle5, .circle6{
        max-width: 200px; 
        width: 18vw;
        max-height: 200px; 
        height: 18vw;
    }
}

.circle1, .circle2, .circle3, .circle4, .circle5, .circle6{
    position: absolute;
    top:0;
    left:0;
}

.parent{
    position: relative;
    background-color: var(--col-blue);
}

.parent:hover .circle1{
    transform: translateX(75%) translateY(45%) rotate(-4deg);
}

.parent:hover .circle2{
    transform: translateY(-75%) translateX(-40%) rotate(3deg);
}

.parent:hover .circle3{
    transform: translateX(75%) translateY(45%) rotate(-3deg);
}

.parent:hover .circle4{
    transform: translateY(45%) translateX(-75%) rotate(4deg);
}

.parent:hover .circle5{
    transform: translateX(-75%) translateY(45%) rotate(5deg);
}

.parent:hover .circle6{
    transform: translateY(-75%) translateX(45%) rotate(-3deg);
}

.circle1, .circle3, .circle5{
    background-color: var(--col-pink);
    opacity: 0.9;
    z-index: 3;
}

.circle2, .circle4, .circle6{
    background-color: var(--col-pink);
    z-index: 2;
}

.circle2 img, .circle4 img, .circle6 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/*------------Free Resources section-------------*/


.resources{
    background-color: var(--col-pink);
    padding-block: 5px;
    text-align: center;
}

.resources h2{
    color: var(--col-white);
}

.resources a:hover{background-color: var(--col-turq); color: black;}

.livvy-image{
    position:relative;
    width:40%;
    left:30%;
}

@media screen and (min-width:800px) {
    .workshops .large{display:inline-block;}
    .box{width:28%;}
    .resources .links{display:inline-block; margin: 0 3%;}
}

/*------------Charity Info section-------------*/

/*--- Pink circles are kept in 'Info Circles' under generic content ---*/

.charity-card{
    display: flex;
    flex-direction: column;
    width: 100%;
    align-content: center;
    padding-top: 6vw;
}

@media screen and (min-width:950px) {
    .charity-card{
        width: 25%;
    }
}

/**************************************************
***           Styling for Other Pages           ***
**************************************************/

/*------------Avatar page sections-------------*/

.avatar-headline{margin-block:auto;}

.avatar-headline-img{
    height:25vw;
    min-height: 170px;
}

.help-arrow-avatar{
    height: 8.5vw;
    max-height: 100px;
    padding-left:10vw;
}

/*------------Services icons section-------------*/

.explore-arrow{
    width:55%; 
    position: absolute;
    left: 3%;
    top: -14vw;
    display: block;
}

.explore{
    background-color: var(--col-turq);
    min-height:460px;
    padding-top: 1rem;
}

.explore-title{
    font-size: 2.3rem;
    margin-top: 0.3rem;
}

.info-card-holder{display: flex; align-items: center; min-height:460px;}

.icon{
    height:110px;
    position: absolute;
    left: 2%;
    transition: 0.5s;
}

.icon:hover{
    height:118px;
    transform: rotate(10deg) translateY(-10px);
    cursor: pointer;
}

#megaphone{top:20px;}
#scroll{top:120px;}
/*#waste{top:220px;}
#economy{top:320px;}*/
#clock{top:220px;}
#behaviour{top:320px;}
#team{top:420px;}

.explore-info{
    width:65%;
    left: 10%;
    display:none;
    position: relative; 
    left: 5%;
}

@media screen and (min-width:800px) {
    .explore-info{left:25%}
    /*.explore{height:65vw;}
    .icon{height:10vw}
    .icon:hover{height:12vw;}
    #megaphone{top:-4vw;}
    #scroll{top:6vw;}
    #waste{top:16vw;}
    #economy{top:26vw;}
    #clock{top:36vw;}
    #behaviour{top:46vw;}
    #team{top:56vw;}*/
}

#initial{
    position: relative;
    width:65%; 
    left:25%; 
    text-align:center;
}


/*------------Sales page sections-------------*/

.intro-list{
    margin: 0;
    padding-left: 0;
    padding-bottom: 3rem;
}

.intro-list li{
    list-style-type: none;
    max-width: 75ch;
    display: flex;
    align-items: center;
    font-size: 1.3rem;
}

.q-mark{
    width: 7rem;
    padding: 1.2rem;
    margin-left: -1.2rem;
    display: inline-block;
    transition: 2s;
}

.q-mark:hover{transform: rotate(720deg);}

.main-text{max-width: 75ch; margin-inline: auto;}

.double-image{
    width: 100%;
    display: grid;
    grid-template-columns: auto auto;
}

.double-image img{max-width: 12vw; margin-inline: auto;}

.triple-image{
    width: 100%;
    display: grid;
    grid-template-columns: auto auto auto;
}

.triple-image img{
    border-radius: 50%;
    width: 15vw;
    min-width: 90px;
    max-width: 200px;
    height: 15vw;
    min-height: 90px;
    max-height: 200px;
    object-fit: cover;
    display: inline-block;
}

.triple-image-left{text-align: left;}
.triple-image-mid{text-align: center;}
.triple-image-right{text-align: right;}

.pricing{
    background-color: var(--col-turq);
    padding-block: 1rem;
}

.pricing h5{font-size: 1.1rem;}

.price-box{
    background-color: var(--col-white);
    padding: 0 1.8rem;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    border-radius: 6px;
    margin: 1rem 6rem;
}

.price-links{
    text-align: right;
}

/*------------Testimonials section-------------*/


.testimonial-header{
    width: 50%;
    margin-inline: auto;
    padding: 3vw 0 2vw 0;
}

.testimonial{
    display: flex;
    flex-direction: row;
}

.sideArrowBox{display: flex; width:15%; align-items: center;}

.sideArrow{
    width:80%; 
    display: block; 
    margin-left: auto; 
    margin-right: auto;
    transition: 0.5s;
}

.sideArrow:hover{width:90%; cursor: pointer;}

.left{transform: rotate(180deg);}

.testimonialCard{
    width:70%;
    background-color: var(--col-blue);
    color: var(--col-white);
    padding: 10px;
    text-align: center;
    border-radius: 2vw;
}

.testimonialCard img{width:20%; display: block; margin-left: auto; margin-right: auto;}

.sales-testimonial{padding: 1rem 0 6rem 0;}


/*------------Quotes section-------------*/

.quote-grid{
    padding:3rem;
    display:grid;
    grid-template-columns: 3.5rem auto 3.5rem;
}

.quote-mark-left, .quote-mark-right{
    display:block;
    width: 3rem;
}

.quote-mark-left{float: left;}
.quote-mark-right{float:right;}


/*------------Charity images-------------*/

.charity-img{margin-inline: auto; width: 70%;}