/* reset -----------*/
                    
                    *,
                    *::before,
                    *::after {
                        margin: 0;
                        padding: 0;
                        box-sizing: border-box;
                    }
                    /* end reset -----------*/
                    /* fonts -----------*/
                    
                    @font-face {
                        font-family: PopLight;
                        src: url(../fonts/Poppins-Light.ttf);
                    }
                    
                    @font-face {
                        font-family: PopRegular;
                        src: url(../fonts/Poppins-Regular.ttf);
                    }
                    
                    @font-face {
                        font-family: "Pipo W00 Regular";
                        src: url("../fonts/2feb95bd5d83306ee6bc4595b4543ff9.eot");
                        /* IE9*/
                        src: url("../fonts/2feb95bd5d83306ee6bc4595b4543ff9.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
                        url("../fonts/2feb95bd5d83306ee6bc4595b4543ff9.woff2") format("woff2"), /* chrome、firefox */
                        url("../fonts/2feb95bd5d83306ee6bc4595b4543ff9.woff") format("woff"), /* chrome、firefox */
                        url("../fonts/2feb95bd5d83306ee6bc4595b4543ff9.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
                        url("../fonts/2feb95bd5d83306ee6bc4595b4543ff9.svg#Pipo W00 Regular") format("svg");
                        /* iOS 4.1- */
                    }
                    /*  end fonts -----------*/
                    
                    #preload {
                        z-index: 10;
                    }
                    
                    .fixed {
                        background: #D4D5CF;
                        opacity: .9;
                        position: fixed;
                        width: 90%;
                        top: 0;
                        z-index: 20;
                        margin-left: 5%;
                    }
                    
                    body {
                        font-family: PopLight;
                        background: #D4D5CF;
                        overflow: hidden;
                        width: 100%;
                        height: 100%;
                    }
                    /*TRANSPARENT BK*/
                    
                    .parallax {
                        width: 100vw;
                        height: 100vh;
                        background: rgba(212, 213, 207, .2);
                        overflow: hidden;
                        overflow-y: scroll;
                    }
                    
                    a {
                        text-decoration: none;
                        color: black;
                    }
                    
                    header {
                        display: flex;
                        width: 90%;
                        height: 10vh;
                        margin: auto;
                        align-items: center;
                        background: #D4D5CF;
                        opacity: .9;
                    }
                    
                    p {
                        font-size: 14px;
                    }
                    
                    .logo-container,
                    .nav-links,
                    .contact {
                        display: flex;
                    }
                    
                    #about h2 {
                        color: rgb(0, 84, 71);
                    }
                    
                    #works h2 {
                        color: rgb(238, 62, 43);
                        /*transform: translateY(200px);*/
                    }
                    
                    .logo {
                        font-family: "Pipo W00 Regular";
                        margin-top: 10%;
                        font-size: 30px;
                        z-index: 2;
                        font-weight: normal;
                        color: black;
                    }
                    
                    .aotearoa {
                        font-family: PopLight;
                        font-size: 9px;
                        text-align: right;
                        color: black;
                        margin: 0%;
                        padding: 0%;
                        transform: translateY(-6px);
                    }
                    
                    .i_aotearoa {
                        font-family: PopLight;
                        font-size: small;
                        text-align: right;
                        color: black;
                        margin: 0%;
                        padding: 0%;
                    }
                    
                    .logo-container {
                        flex: 1;
                    }
                    
                    nav {
                        flex: .8;
                    }
                    
                    .nav-links {
                        justify-content: space-around;
                        list-style: none;
                        font-size: 14px;
                    }
                    
                    .nav-links .nav-link {
                        padding: 0px 20px 5px 20px;
                    }
                    
                    .nav-link,
                    .logo {
                        cursor: pointer;
                    }
                    
                    .contact {
                        flex: 0.2;
                        justify-content: flex-end;
                        z-index: 2;
                    }
                    
                    .contact img {
                        width: 18px;
                        cursor: pointer;
                    }
                    
                    .logo {
                        font-size: 20px;
                    }
                    
                    .nav-open {
                        position: absolute;
                        top: 0px;
                        left: 0px;
                        width: 100%;
                        height: 30vh;
                        background: #D4D5CF;
                        z-index: 1;
                        display: grid;
                        grid-template-columns: 4% 1fr 1fr 4%;
                        justify-items: center;
                        align-items: center;
                        text-align: center;
                        transform: translateY(-100%);
                    }
                    
                    .nav-open h3 {
                        font-size: 15px;
                    }
                    
                    .contactInfo {
                        grid-column: 1/3;
                    }
                    
                    .contactInfo h3 {
                        padding: 1%;
                        font-size: 12px;
                    }
                    
                    .soial-links img {
                        padding: 0px 20px;
                    }
                    
                    .page {
                        grid-template-rows: 1fr 1fr;
                        flex-direction: column;
                        display: grid;
                        width: 90%;
                        height: 90vh;
                        margin: auto;
                        align-items: center;
                        z-index: 1;
                        margin-top: 2vh;
                        /*background: blue;*/
                    }
                    
                    .about {
                        height: 30vh;
                        margin-bottom: 30%;
                    }
                    
                    .introduction {
                        width: 90vw;
                        height: 100vh;
                    }
                    
                    .know_more {
                        text-align: center;
                        margin-top: 70vh;
                    }
                    
                    .know_more2 {
                        text-align: center;
                    }
                    
                    .artist {
                        font-size: 12px;
                    }
                    
                    .cover {
                        height: 10vh;
                        margin-top: 1vh;
                        margin-bottom: 20%;
                    }
                    
                    #bold,
                    #bold2,
                    #bold3 {
                        font-size: 1.1rem;
                        font-weight: bolder;
                    }
                    
                    .title {
                        font-size: 20px;
                    }
                    
                    .cover p {
                        font-size: 14px;
                        text-align: left;
                        letter-spacing: normal;
                        background: rgba(212, 213, 207, 0.7);
                    }
                    
                    .supplier {
                        color: black;
                        cursor: pointer;
                        font-weight: bold;
                        text-decoration-line: underline;
                    }
                    
                    .us {
                        color: rgb(0, 84, 71);
                        text-decoration-line: underline;
                    }
                    
                    .photo {
                        margin-top: 120%;
                        /*background: rebeccapurple;*/
                        height: 100%;
                    }
                    
                    #pklet_photo {
                        margin-bottom: 30%;
                        /*background: yellow;*/
                        height: 50vh;
                    }
                    
                    .photo img {
                        width: 80%;
                        margin-top: 50%;
                        margin-left: 10%;
                    }
                    
                    #conhexo {
                        margin-top: 30%;
                    }
                    
                    .shadow {
                        filter: drop-shadow(0px 5px 3px rgba(0, 0, 0, 0.5));
                        transform: translateY(-50%);
                    }
                    
                    .copyright {
                        width: 100%;
                        height: 50px;
                        text-align: center;
                        padding: 2rem 0;
                        position: relative;
                        margin-top: 50vh;
                        background: rgba(212, 213, 207, 0.7);
                    }
                    
                    .copyright p {
                        font-size: 12px;
                    }
                    
                    .end p {
                        margin-bottom: 20vh;
                    }
                    
                    @media screen and (max-width:360px) {
                        .page {
                            margin-top: 2vh;
                            margin-bottom: 20vh;
                        }
                        .cover p {
                            font-size: 12px;
                        }
                        /*#pklet_photo {
                        
                        height: 50vh;
                        margin-top: 70vh;
                        margin-bottom: 10vh;
                    }*/
                        #works h2 {
                            color: rgb(238, 62, 43);
                            margin-top: 10%;
                        }
                        .photo {
                            margin-bottom: 30%;
                        }
                        .photo img {
                            width: 80%;
                            margin-top: 50%;
                            margin-bottom: 30%;
                            margin-left: 10%;
                        }
                        #conhexo {
                            transform: translateY(100px);
                        }
                        .end {
                            margin-top: 30%;
                        }
                    }
                    /*Landscape orintation */
                    
                    @media screen and (max-width: 3000px) and (orientation: landscape) {
                        #pklet_photo {
                            margin-bottom: 80%;
                        }
                    }
                    /*SLIDER*/
                    
                    #slider {
                        margin: 0 auto;
                        width: 800px;
                        max-width: 100%;
                        text-align: center;
                    }
                    
                    #slider input[type=radio] {
                        display: none;
                    }
                    
                    #slider label {
                        cursor: pointer;
                        text-decoration: none;
                    }
                    
                    #slides {
                        padding: 10px;
                        border: 3px solid #ccc;
                        background: #fff;
                        position: relative;
                        z-index: 1;
                    }
                    
                    #overflow {
                        width: 100%;
                        overflow: hidden;
                    }
                    
                    #slide1:checked~#slides .inner {
                        margin-left: 0;
                    }
                    
                    #slide2:checked~#slides .inner {
                        margin-left: -100%;
                    }
                    
                    #slides .inner {
                        transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
                        width: 400%;
                        line-height: 0;
                        height: 300px;
                    }
                    
                    #slides .slide {
                        width: 25%;
                        float: left;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        height: 100%;
                        color: #fff;
                    }
                    
                    #slides .slide_1 {
                        background: url(../img/works_cover.png) no-repeat;
                        background-size: cover;
                    }
                    
                    #slides .slide_2 {
                        background: url(../img/Scketch-Orne.png) no-repeat;
                        background-size: cover;
                    }
                    
                    .slide-content {
                        padding: 10px;
                        background: #D4D5CF;
                        ;
                        width: 60%;
                        opacity: .8;
                    }
                    
                    .worksLinks {
                        font-weight: bolder;
                        position: absolute;
                        color: black;
                        cursor: pointer;
                        z-index: 9;
                    }
                    
                    #controls {
                        margin: -180px 0 0 0;
                        width: 100%;
                        height: 50px;
                        z-index: 3;
                        position: relative;
                    }
                    
                    #controls label {
                        transition: opacity 0.2s ease-out;
                        display: none;
                        width: 50px;
                        height: 50px;
                        opacity: .4;
                    }
                    
                    #controls label:hover {
                        opacity: 1;
                    }
                    
                    #slide1:checked~#controls label:nth-child(2),
                    #slide2:checked~#controls label:nth-child(1) {
                        background: url(https://image.flaticon.com/icons/svg/130/130884.svg) no-repeat;
                        float: right;
                        margin: 0 -50px 0 0;
                        display: block;
                    }
                    
                    #slide1:checked~#controls label:nth-last-child(2),
                    #slide2:checked~#controls label:nth-last-child(1) {
                        background: url(https://image.flaticon.com/icons/svg/130/130882.svg) no-repeat;
                        float: left;
                        margin: 0 0 0 -50px;
                        display: block;
                    }
                    /* #bullets {
                        margin: 150px 0 0;
                        text-align: center;
                    }*/
                    /*#bullets label {
                        display: inline-block;
                        width: 10px;
                        height: 10px;
                        border-radius: 100%;
                        background: #ccc;
                        margin: 0 10px;
                    }*/
                    
                    #slide1:checked~#bullets label:nth-child(1),
                    #slide2:checked~#bullets label:nth-child(2) {
                        background: #444;
                    }
                    
                    @media screen and (max-width: 900px) {
                        #slide1:checked~#controls label:nth-child(2),
                        #slide2:checked~#controls label:nth-child(1),
                        #slide1:checked~#controls label:nth-last-child(2),
                        #slide2:checked~#controls label:nth-last-child(1) {
                            margin: 0;
                        }
                        #slides {
                            /*max-width: calc(100% - 100px);*/
                            margin: 0 auto;
                        }
                    }