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

html{
box-sizing: inherit;
font-size: 62.5%;
height: 100%;
}

@font-face{
font-family: "didot-regular";
src:  	url('../assets/fonts/Didot.woff2') 	format('woff2'),
        url('../assets/fonts/Didot.woff')   format('woff');
font-weight: 600;
font-style: normal;
}

@font-face{
font-family: "didot-italic";
src:  	url('../assets/fonts/DidotItalic.woff2') 	format('woff2'),
        url('../assets/fonts/DidotItalic.woff')   format('woff');
font-weight: 600;
font-style: italic;
}

@font-face{
font-family: "myriadpro";
src:    url(' ../assets/fonts/MyriadPro-Regular.woff')   format('woff');
font-weight: 600;
font-style: normal;
} 

.header {
        background-color: #20d9cd;
        height: 15rem;
}

.header__wrapper {
        width: 96rem;
        height: 15rem;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
}

.nav__listitems {
        margin-right: 3rem;
        display: flex;

}

.nav__listitem {
        font-size: 3rem;
        font-family: "didot-regular";
        font-style: small-caps;
        padding: 1rem;
        margin: 1rem;
}

.nav__listitem:hover {
        background-color: #efd3e7;
        text-decoration: underline;
        text-decoration-color: white;
        text-decoration-style: dashed;
        border-radius: 1rem;
        transition: 0.3s all;
}

.nav__listitem--active {
        text-decoration: underline;
        text-decoration-color: white;
        text-decoration-style: dashed;
}

.nav__listitem--link {
        color: white;
        text-decoration: none;
}

.nav__listitem--link:hover {
        color:#20d9cd;
        transition: 0.3s all;
}

.header__logo {
        margin-left: 3rem;
        margin-bottom: -10rem;
}

.content {
        width: 96rem;
        border: double #efd3e7 0.2rem;
        border-width: 0.3rem;
        margin: 0 auto;
        margin-top: -14.5rem;
        padding: 15rem 3rem 0rem 3rem;
}
.content--frontpage {
        display: grid;
        grid-template-columns: 25rem 65rem;
}

.title--frontpage {
        background-image: url("../assets/img/Title-Frontpage.png");
        width: 111.5rem;
        height: 58rem;
        grid-area: 1 1 3 2;
        margin-top: 5rem;
        margin-left: -2.5rem;
        z-index: 3;
}
.title--frontpage::before {
        background-image: url("../assets/img/PlaneGreen.png");
        width: 43.8rem;
        height: 43.7rem;
        display: inline-block;
}

.title--hidden {
        display: none;
}

.article--who {
        grid-row: 2 / 3;
        grid-column: 2 / 3;
        margin-top: 40rem;

}

.article--who::before {
        content:"";
        background-image: url("../assets/img/Flower-with-path.png");
        width: 123.6rem;
        height: 73rem; 
        position: absolute;
        display: inline-block;
        margin-top: -53rem;
        margin-left: -57rem;
        z-index: 2;
}

.article--what {
        grid-row: 3 / 4;
        grid-column: 2 / 3;
}

.article__subtitle {
        font-size: 3rem;
        font-family: "didot-italic", Arial, Helvetica, sans-serif;
        padding-bottom: 2.5rem;
}

.article__subtitle--frontpage {
        color: #0a908f;
}

.article__paragraph {
        font-size: 1.6rem;
        font-family: "myriadpro", Arial, Helvetica, sans-serif;
        line-height: 1.4;
}

.article__paragraph--frontpage {
        color: #180767;
        padding-bottom: 8rem;
        padding-left: 0.5rem;
}

.article__link--services {
        color: #180767;
        display: block;
        grid-row: 4 / 5;
        grid-column: 2 / 3;
        margin-top: -2rem;
        padding-bottom: 6rem;
        padding-left: 0.5rem;
        font-size: 1.6rem;
        font-family: "myriadpro", Arial, Helvetica, sans-serif;
        line-height: 1.4;
}

.article__link--services::before {
        content:"";
        background-image: url("../assets/img/Liana.png");
        width:93.8rem;
        height: 96.3rem;
        display: inline-block;
        position: absolute;
        margin-top: -75rem;
        margin-left: -35rem;
        z-index: -1
}

.article__link--layout {
        color: #0a908f;
        text-decoration: none;
}

.article__link--layout:hover {
        cursor: pointer;
}

/*Services*/
.services__content {
        display: grid;
        grid-template-columns: 40rem 10rem 40rem;
        grid-template-rows: auto repeat(5, 50rem 6.5rem) min-content;
        z-index: 2
}

.title {
        grid-area: 1 / 1 / 2 / 4;
        color: #180767;
        font-size: 5.5rem;
        font-family: "didot-italic", Arial, Helvetica, sans-serif;
        margin-top: 12rem;
        margin-bottom: 10rem;
}

.article--tnt {
        grid-area: 2 / 1 / 3 / 3;
        
}

.article--tnt::before, .article--pmt::before, .article--ll::before {
        content:"";
        background-image: url("../assets/img/Cloud_purple.png");
        background-repeat: no-repeat;
        width: 96rem;
        height: 50rem;
        display: inline-block;
        position: absolute;
        margin-top: -13.5rem;
        margin-left: -3.5rem;
        z-index: -1;
}

.article--nn::before, .article--tt::before {
        content:"";
        background-image: url("../assets/img/Cloud_green.png");
        background-repeat: no-repeat;
        width: 96rem;
        height: 50rem;
        display: inline-block;
        position: absolute;
        margin-top: -13rem;
        margin-left: -42.5rem;
        z-index: -1;
}
.article--nn {
        grid-area: 4 / 2 / 5 /4;
}

.article--pmt {
        grid-area: 6 / 1 / 7 / 3;
}

.article--tt {
        grid-area: 8 / 2 / 9 / 4;
}

.article--ll {
        grid-area: 10 / 1 / 11 / 3;
}

/* Colors services leaves */
.article__subtitle--purple {
        color: #0a908f;
        font-size: 5rem;
        margin-left: 2.5rem;
}

.article__paragraph--purple {
        color: white;
        margin-left: 2.5rem;
        
}            

.article__subtitle--green {
        color: #6c4c9a;
        font-size: 5rem;
}

.article__paragraph--green {
        color: white; 
        margin-right: 5rem;
}

.services__article--layout {
        padding-top: 13.5rem;
}

/* Leaves-bushes */
.services__illustration--tnt {
        grid-area:  2 / 3 / 3 / 4;
}

.services__illustration--nn {
        grid-area: 4 / 1 / 5 / 2;
}

.services__illustration--pmt {
        grid-area: 6 / 3 / 7 / 4;
}

.services__illustration--tt {
        grid-area: 8 / 1 / 9 / 2;
}

.services__illustration--ll {
        grid-area: 10 / 3 / 11 / 4;
}

.services__illustration {
        align-self: center;
        
}
.services__illustration:hover {
        transform: rotate(10deg);
        transition: 0.3s all;
}

/* Background */
.services__background::before {
        content:"";
        background-image: url("../assets/img/LeftTreeSingle.png");
        background-repeat: no-repeat;
        width: 57.1rem;
        height: 288.4rem;
        display: inline-block;
        position: absolute;
        margin-top: -11rem;
        margin-left: -53rem;
        z-index: -2;
}

.services__background::after {
        content:"";
        background-image: url("../assets/img/RightTreeSingle.png");
        background-repeat: no-repeat;
        width: 54.6rem;
        height: 337.4rem;
        display: inline-block;
        position: absolute;
        margin-top: -60rem;
        margin-left: 84rem;
        z-index: -2;
}

.services__toxictasting--link {
        text-decoration: none;
        color: #6c4c9a;
        display: block;
}

/* specialty */
.specialty__section {
        display: grid;
        grid-template-columns: 90rem;
        grid-template-rows: min-content min-content min-content min-content auto;
}

.section__title--specialty {
        grid-area: 1 / 1 / 2 /3;
}

.section__article {
        display: grid;
        grid-template-rows: min-content 4rem min-content 8rem;
        grid-template-columns: 60rem 30rem;
}

/* Positionering articles in section */
.section__article--toxicwhat {
        grid-area: 2 / 1 / 3 / 2;
}

.section__article--toxichow {
        grid-area: 3 / 1 / 4 / 2;
}

.section__article--lifelongguarantee {
        grid-area: 4 / 1 / 5 / 3;
}

/* Positionering in articles */
.article__subtitle--toxicwhat, .article__subtitle--toxichow, .article__subtitle--lifelongguarantee {
        grid-area: 1 / 1 / 2 / 2;
}

.article__paragraph--toxicwhat, .article__paragraph--toxichow, .article__paragraph--lifelongguarantee {
        grid-area: 2 / 1 / 3 / 2
}

.article__picture--specialtysquirrel {
        grid-area: 1 / 2 / 4 / 3;
}

.article__picture--specialtypoison {
        grid-area: 1 / 2 / 4 / 3;
}

.section__title--specialty {
        color: #180767;
        font-size: 5.5rem;
        font-family: "didot-italic", Arial, Helvetica, sans-serif;
        margin-top: 12rem;
        margin-bottom: 8rem;
}

.article__subtitle--specialty {
        color: #0a908f
}

.article__paragraph--specialty {
        color: #180767;
        margin-right: 1rem;
}

/*rating*/
.specialty__section--rating {
        display: grid;
        grid-template-columns: 60rem 30rem;
}

.rating--wrapper {
        grid-area: 2 / 1 / 3 / 2;
        display: flex;
        flex-flow: column;
}

.rating--namelabel {
        display: flex;
        flex-flow: column;
}

.rating--name {
        width: 30rem;
        border: double #efd3e7 0.2rem;
        margin-bottom: 1rem;
}

/*height inputfield*/
.rating--comment {
        height: 10rem;
        display: flex;
        align-items: flex-start;
        border: solid #efd3e7 0.2rem;
}

.rating--buttons {
        grid-area: 3 / 1 / 4 / 2;
        display: flex;
        justify-content: space-between;
        margin-bottom: 1rem;
}

.section__title--rating {
        font-size: 5rem;
        font-family: "didot-italic", Arial, Helvetica, sans-serif;
        color: #180767;
        grid-area: 1 / 1 / 2 / 3;
        margin-top: 0rem;
        margin-bottom: 6rem;
}

.rating--send-button {
        display: block;
        margin-top: 2rem;
        border: #efd3e7 solid 0.2rem;
        align-content: center;
        padding-top: 4rem;
        padding-bottom: 4rem;
        font-family: "myriadpro", Arial, Helvetica, sans-serif;
        color: #180767;

}

.rating__subtitle {
        font-family: "myriadpro", Arial, Helvetica, sans-serif;
        font-size: 1.6rem;
        padding-top: 2rem;
        color: #180767;
        padding-bottom: 1rem;       
}

.hidden {
        display: none;
}

.hidden:checked+img {
        border: 0.2rem solid #efd3e7;
}

.rating--replacing-image {
        display: inline-block;
        margin-top: -25rem;
        margin-left: 59rem;
        position: absolute;
}