styles.css

main {
    margin: 3rem;
}

* {
    box-sizing: border-box;
}


body {
    margin: 0;
}

h1 {
    text-align: center;
    padding-top: 5vw;
    font-family: var(--fancyheader);
    font-size: 5vw;
}

a {
    color: black;
    font-family: var(--buttonfont);
}

h2 {
    font-family:var(--uppercaseheader);
    font-size: 3rem;
    margin: 0;
}

h3 {
    font-family: var(--uppercaseheader);
    font-size: 3rem;
}

p {
    font-family: var(--breadfont);
    font-size: 1.2rem;
}


mark {
    font-family: var(--buttonfont);
    font-size: 2rem;
}

form {
    font-family: var(--breadfont);
}


/* VARIABLES */


/*
font-family: 'Mohave', cursive;
font-family: 'Bebas Neue', cursive;
font-family: 'Lobster', cursive;
font-family: 'Open Sans Condensed', sans-serif;*/



:root {

    --uppercaseheader: 'Bebas Neue';
    --fancyheader: 'Lobster';
    --breadfont: 'Open Sans Condensed';
    --buttonfont: 'Open Sans Condensed';


    --coldrose: #DBCEBD;
    --coldblue: #A7AEB4;
    --nearlywhite: #f1f1f1;
    --nearlyblack: #1C2324;
    --checkout: #264547;
}





/*Breadcrumb*/
@media screen and (max-width:590px) {
    .breadcrumb {
        display: none;
}
}

ul.breadcrumb {
    list-style: none;
    padding-left: 4rem;
}


ul.breadcrumb li {
    display: inline;
    font-family: var(--breadfont);
}

.breadcrumb a {
text-decoration: none;
}

ul.breadcrumb li+li:before {
    padding: 8px;
     color: black;
    content: "/\00a0";
}

.slidinghoverbreadcrumb {
    position: relative;
}

.slidinghoverbreadcrumb:after{
    content: '';
    position: absolute;
    width: 0; height: 2px;
    display: block;
    margin-top: 5px;
    right: 0;
    transition: width .2s ease;
    -webkit-transition: width .5s ease;
    background: black;
  }
   
  .slidinghoverbreadcrumb:hover:after{
    width: 100%;
    left: 0;
    background: black;
  }






/* ----------------------------------------------------index.html--------------------------------------------------------------------*/

/* Header */

header {
    background-image: url(images.img/mohamed-ziyan-ayTl3SMXCoc-unsplash.jpg);
    background-size:cover;
    position: relative;
    height: 14vw;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
   
    margin-bottom: 5vw;
    z-index: 1;
}


/*Flex oppsett*/


.burgermenu {
    flex: 33.3%;
}

.headermenu {
    flex: 33.3%;
    padding-bottom: 0.5rem;
    position: relative;
}

.logoheaderdiv {
   flex: 33.3%;
}

.icons {
    flex: 33.3%;
}

div.icons {
  text-align: end;
}

img.logoheader {
    width: 12vw;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.headermenu ul {
    list-style: none;
    padding-left: 1rem;
}

.headermenu li {
    float: left;
    margin-left: 1.5rem;
    margin-top: 1.5rem;
}

.headermenu a {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.1rem;
    font-weight: 600;
    font-family: var(--buttonfont);
}

.slidinghover {
    position: relative;
}


.slidinghover:after{
    content: '';
    position: absolute;
    width: 0; height: 2px;
    display: block;
    margin-top: 5px;
    right: 0;
    transition: width .2s ease;
    -webkit-transition: width .5s ease;
    background: white;
  }
   
  .slidinghover:hover:after{
    width: 100%;
    left: 0;
    background: white;
  }
   /* Inspirasjon/: https://codepen.io/mehi/pen/MyWqPM */
  


/* Hamburgermeny */
nav.hamburgermenu {
    display: none;
}

input#hamburgermenu {
    display: none;
}

input#hamburgermenu:checked ~ nav.hamburgermenu {
    display: block;
}

div.burgermenu {
    padding-left: 3vw;
    width: 250px;
}

.hamburgermenu ul {
    list-style: none;
    display: inline-block;
    width: 340px;
    margin-bottom: 0;
    background-color: var(--coldrose);
    padding: 1rem;
}

.hamburgermenu ul li {
    border-bottom: solid white 0.1rem;
    margin-bottom: 1rem;
    text-align: center;
    padding-top: 1rem;
}

.hamburgermenu ul li:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding: 0.5rem;
}

.hamburgermenu li a {
    text-decoration: none;
    color:var(--nearlyblack);
    letter-spacing: 0.1rem;
    font-weight: 600;
    text-transform: uppercase;
   font-family: var(--buttonfont);
    font-size: 1rem;
    padding: 2rem;
}


/* Ikoner + search */
.fas {
    color: white;
    font-size: 1.5rem;
}

.shoppingbag {
    margin-right: 1rem;
} 

.search {
  width: 13rem;
  background-color: transparent;
  border:none;
  border-bottom: white solid 2px;
}
.account {
    margin-right: 1.5rem;
}

input#smallsearch {
    width: 4rem;
    height: 15px;
    border: 2px solid transparent;
    border-radius: 4px;
    font-size: 1rem;
    color: white;
    background-image:url(images.img/icons8-search.svg);
    background-color: transparent;
    background-repeat: no-repeat;
    padding: 1rem 1rem 1rem 1rem;
    transition: width 1s ease-in-out, border 1s ease-in-out;
    margin-left: 1rem;
    padding-bottom: 1rem;
}

input#smallsearch:focus {
    width: 60%;
    border: 2px double white;
    background-image: none;
}

input#smallsearch:hover {
    cursor: pointer;
}
  
/* inspo fra lecture notes*/

/* Responsiveness*/



@media screen and (min-width: 1262px) {
    #searchicon {
        display: none;
    }
    .search {
        margin-right: 1rem;
    }
}

@media screen and (max-width: 1262px) {
    .search {
        display: none;
    }
}


@media screen and (max-width:1262px) {
    .headermenu {
        display: none;
    }
    #searchicon {
        margin-left: 1rem;
    }
}

@media screen and (min-width:1262px) {
    .burgermenu {
        display: none;
      
    }
    
}

@media screen and (max-width: 590px) {

    header {
        position: -webkit-sticky;
        position: sticky;
        top: 0;

    }
}






/* New collection */

.cityimage img {
    width: 650px;
    height: auto;
    display: block;
}

.umbrellaimage img {
    width: 330px;
    height: auto;
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.newcollectiontop {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 4rem;
}

div.collectiontext {
    width: 50%;
}

div.newcollectiontop {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}


div.newcollectionbottom {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.newcollectionbottom {
    margin-top: 2rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7vw;
}

div.showmelink {
    text-align: end;
    width: 161.19px;
    height: 58px;
}

.showmelink div {
    width: fit-content;
    height: fit-content;
}

.showmelink a {
    padding: 1rem 3rem 1rem 3rem;
    background-color: white;
    color: black;
    border: black solid 2px;
    text-decoration: none;
    font-size: 1rem;
    font-family: var(--buttonfont);
    text-transform: uppercase;
    font-weight: 600;
}

.showmelink :hover {
    background-color: var(--nearlyblack);
    color: white;
}


/*Responsiveness*/
@media screen and (max-width: 1310px) {
    
.cityimage img {
    width: 540px;
   
}

.umbrellaimage img {
    width: 275px;
}
}

@media screen and (max-width: 1100px) {
    
    .cityimage img {
        width: 450px;
       
    }
    
    .umbrellaimage img {
        width: 230px;
    }
    }

    @media screen and (max-width: 940px) {
    
        .cityimage img {
            width: 395px;
           
        }
        
        .umbrellaimage img {
            width: 200px;
        }
        }

        @media screen and (max-width: 820px) {
    
            .cityimage img {
                width: 100%
               
            }
            
            .umbrellaimage img {
                display: none;
            }
            

            .newcollectionbottom {
                flex-direction: column;

            }
            

            div.collectiontext {
                width: 100%;
            }
        }




/* Shop Woman og Man */

.imageshopwoman img, .imageshopman img {
    width: 100%;
    height: auto;
    z-index: 2;
}

.buttonshopwoman a, .buttonshopman a {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.1vw;
    font-size: 1.1rem;
    padding: 1.5vw;
    border: solid white;
}

section.shopwoman, section.shopman {
    position: relative;
    width: 100%;
    margin-bottom: 4rem;
}

div.buttonshopwoman {
    position: absolute;
    top: 50%;
    right: 12%
}

div.buttonshopman {
    position: absolute;
    top: 50%;
    left: 12%
}

div.buttonshopwoman :hover {
    background-color: var(--nearlyblack);
    color: white;
}

div.buttonshopman :hover {
    background-color: var(--nearlyblack);
    color: white;
}


/* Shop by category */


.shopbycategoryimages img {
    width: 30.5vw;
    height: auto;
    display: block;
}

.shopbycategoryimages {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1rem;
}

#categoryimage1, #categoryimage2, #categoryimage3 {
    flex: 33.3%;
}

div.shopbycategoryimages {
    width: 100%;
}

h2.adventure {
    padding-top: 3vh;
    text-align: right;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.2vw;
}

a.linkcategory {
    display: block;
    text-align: right;
    color: black;
    font-size: 1rem;
    letter-spacing: 0.05rem;
}

div.shopbycategorytext {
    margin-bottom: 4rem;
    margin-right: 1rem;
}


/*Responsiveness*/
@media screen and (max-width: 1330px) {
    .shopbycategoryimages {
        flex: 100%;
    }   
}

@media screen and (max-width: 1330px) {
    #categoryimage3, #categoryimage2 {
        flex: 50%;
    }   
}

@media screen and (max-width: 1330px) {
    #categoryimage1 {
        display: none;
    }   
}


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

    a.linkcategory {
        font-size: 0.6rem;
    }
}




/* Shop our bestsellers */

.shopourbestsellers img {
    width: 100%;
    height: auto;
    display: inline-block;
}

.shopourbestsellers {
    position: relative;
}

.shopbestsellersbutton {
    position: absolute;
    padding: 0;
    margin: 0;
    top: 46%;
   left: 43.5%;
}

div.shopourbestsellers {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}


a.shopbestsellersbutton {

    display: block;
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    font-size: 1vw;
    letter-spacing: 0.2vw;
    font-weight: 600;
    padding: 1vw;
    background-color: transparent;
    border: solid 2px white;
}

a.shopbestsellersbutton:hover {
    background-color: white;
    color: var(--nearlyblack);
}









/* Newsletter */

.newsletter {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding-top: 2rem;
    margin: 4rem 0 6rem 0;
}

div.newsletterform {
    flex: 50%;
}


div.imagenewsletter {
    flex: 50%;
}


.imagenewsletter img {
    width: 18rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
}


#newsletterformform {
    background-color: var(--coldrose);
    padding: 2rem;
    width: 35rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

form ul {
    list-style: none
}

#newsletterfieldset {
   
    border: 2px solid var(--nearlyblack) ;
    font-size: 1rem;
    letter-spacing: 0.2rem;
}

legend {
    color: #0E1619;
    font-family: var(--breadfont);
    text-transform: uppercase;
    font-weight: 600;
}

input#name, input#email {
    width: 20rem;
    height: 1.6rem;
}

input#name:hover, input#email:hover {
    background-color: var(--nearlywhite);
    outline-style: solid;
    outline-color: grey;
    outline-width: 0.1rem;
}

li {
    padding-bottom: 1rem;
}


li.submitnewsletter button {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    font-size: 0.8rem;
    padding: 0.4rem 2.2rem 0.4rem 2.2rem;
    border: none;
    background-color: #1B2423;
}

.submitnewsletter button:hover {
    cursor: pointer;
    outline-width: 0.2rem;
    outline-style: groove;
}


/*Responsiveness*/

@media screen and (max-width: 600px) {
    input#name, input#email {
        width: 12rem;
        height: 1.4rem;
    }
}

@media screen and (max-width: 600px) {
    #newsletterformform {
        width: 24rem;
        padding: 1.2rem;
    }
}

@media screen and (max-width: 600px) {
    #newsletterformform  ul {
    padding-left: 1rem;
    
}
}

@media screen and (max-width: 1216px) {
    .imagenewsletter img {
       display: none;
    }
}




/* Footer */

footer {
    background-image: url(images.img/Optimized-jordan-k7W1jtKouM4-unsplash.jpg);
    background-size: cover;
    padding-top: 1rem;
    height: 20rem;
    position: relative;
}

div.menulists {
    width: 60%;
    margin-left: 30vw;
    margin-top: 5rem;
}

.menulists > div {
    height: 3rem;
}

/* STYLE FOOTERMENU MOBIL */

.menumobilul {
    list-style: none;
}

.menumobil a {
    display: block;
    text-decoration: none;
    color: var(--nearlyblack);
    letter-spacing: 0.1rem;
    padding: 0.5rem 1rem 0.5rem 1rem;
    background-color: var(--coldrose);
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: bold;
}

div.menumobil {
    height: fit-content;
    width: 17rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 4rem;
    margin-bottom: 1rem;
}

.menumobil ul {
padding: 0;
margin: 0;
}

.socialmediamobil {
    float: right;
    margin-right: 1.2rem;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
}

.tothetopmobil {
    margin-left: 2.5rem;
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;

}

.tothetopmobil a{
    color: white;

}

.aboutuslist ul, .customerservicelist ul, .productslist ul {
    list-style: none;
    display: inline-block;
}

.aboutuslist li, .customerservicelist li, .productslist li {
    padding-right: 0.8rem;
    float: left;

}

.aboutuslist a, .customerservicelist a, .productslist a {
    color: white;
    text-decoration: none;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 600;
}

mark {
    background-color: transparent;
    color: white;
    font-weight: 600;
    font-size: 1.2rem;
    text-transform: uppercase;
    padding-right: 1rem;
    font-family: var(--buttonfont);
}



/* Social Media ikoner */
.fab {
color: white;
font-size: 2rem;
margin-right: 1rem;
}

div.socialmedia {
    float: right; 
    margin-right: 2rem;
}

div.tothetop {
    float: left;
    margin-left: 2rem;
    margin-top: 1rem;
}

.tothetop a {
    color: white;
}



/* Responsiveness*/
@media screen and (max-width: 1090px) {
    .menulists {
        display: none;
    }
    div.socialmedia {
        display: none;
    }
    .tothetop {
        display: none;
    }
}

@media screen and (min-width: 1090px) {
    .menumobil {
        display: none;
    }
    .tothetopmobil {
        display: none;
    }
    div.socialmediamobil {
        display: none;
    }
}


@media screen and (max-width: 450px) {
    body, main {
    margin: 0;
    }
}




/* ------------------------------------------------ourproducts.html --------------------------------------------------------------------*/



.gridforhele {
    display: grid;
    grid-template-areas: 'aside.filtermenu' 'section.productlist' 'section.productlist' 'section.productlist';
    margin-top: 10vw;
    justify-content: space-between;
}

aside.filtermenu, div.filtermenuinburger {
    display: inline-block;
    background-color: white;
    border: solid black 2px;
    padding: 3vw 1vw 3vw 1vw;
    width: fit-content;
    margin-right: 1rem;
}

div.filtermenuinburger {
    margin-right: 0;
    width: 340px;
    font-family: var(--breadfont);
}

.filtermenuinburger div {
    margin-bottom: 1rem;
}

div.filtermenuinburger ul {
    background-color: var(--nearlywhite);
    border: var(--nearlyblack) solid 1px;
    width: 300px;
}

div.filtermenuinburger li {
    text-align: left;
    font-size: 1.2rem;
    border: none;
    color: black;
    border: black solid 1px;
    background-color: white;
    padding-left: 0.4rem;
}

.sortedbydiv, .categorydiv, .sizediv, .colourdiv, .prizediv {
    font-size: 1.5rem;
    text-transform: uppercase;
    font-weight: bolder;
}

div.sex {
    font-size: 1.2rem;
    text-transform: uppercase;
    font-weight: bolder;
}

.headermenuburger ul {
    width: 340px;
}


aside.filtermenu ul {
    padding: 0;
}

aside {
   
    height: fit-content;
}

section.productlist {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 1rem;

}

.productlist img {
    width: 18rem;
    height: auto;
    display: block;
}


/*Styling*/

#fargeiconblack, #fargeicongrey, #fargeiconbeige, #fargeiconblue {
    font-size: 0.8rem;
}

#fargeiconblack {
    color: black;
}

#fargeicongrey {
    color: grey;
}

#fargeiconbeige {
    color: beige;
}

#fargeiconblue {
    color: navy;
}

.categorydiv a {
    float: right;
}

.filtermenu > div {
    padding-bottom: 3vw;
}

div.sex {
    padding-bottom: 3vw;
}

.filtermenu input {
background-color: var(--coldblue);
color: white;
letter-spacing: 0.05rem;
}



div.productcol {
    display: inline-block;
    padding-bottom: 1rem;
}


div.infoimage {
    display: inline-block;
    width: 18rem;
    height: 150px;
    text-align: center;
    padding: 1rem;

}



.infoimage p {
    margin: 0%;
}

p.prize {
    font-size: 20px;
    padding-top: 0.5rem;
    font-weight: 600;
    padding-bottom: 1rem;
}

.infoimage a {
    display: inline-block;
    text-decoration: none;
    font-family: sans-serif;
    text-transform: uppercase;
    font-size: 1rem;
    padding: 0.7rem 3rem 0.7rem 3rem;
    background-color: var(--coldrose);
    color: var(--nearlyblack);
    letter-spacing: 0.1rem;
    font-weight: 600;
}

.outlinehover:hover {
    outline:black;
    outline-style: double;
}



.pagebutton-desktop {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagebutton-desktop a { 
    display: block;
    text-decoration: none;
    font-size: 0.8rem;
    font-family: sans-serif;
    padding-top: 0.7rem;
    color: black;
    letter-spacing: 0.05rem;
    height: 2.5rem;
}
#previouspage, #nextpage {
    width: 10rem;
    height: 2.5rem;
    border: solid 1px grey;
    text-align: center;
}

#nextpage {
    border: black solid 2px;
}

.pagebutton-desktop p {
    margin: 2rem;
    display: block;
    font-size: 1rem;
    font-family: sans-serif;
    letter-spacing: 0.05rem;
}

#previouspage :hover {
    background-color: var(--coldblue);
    color: white;
}

#nextpage :hover {
    background-color: var(--coldblue);
    color: white;
}


/* Mobil */

.pagebutton-mobil {
    display: flex;
    justify-content: center;
    align-items: center;
}

#previouspagemobil, #nextpagemobil {
    width: 5rem;
    height: 2.5rem;
    border: solid 1px grey;
    text-align: center;
}


.pagebutton-mobil a { 
    display: block;
    text-decoration: none;
    font-size: 0.8rem;
    padding-top: 0.7rem;
    color: black;
    height: 2.5rem;
}

.pagebutton-mobil p {
    margin: 1rem;
    display: block;
    font-size: 1rem;
    font-family: sans-serif;
    letter-spacing: 0.05rem;
}




#homelink a {
    display: block;
    width: 5rem;
    height: 3rem;
    margin-left: auto;
    margin-right: auto;
    color: black;
}

#homelink {
    text-align: center;
}




/* Responsiveness*/

@media screen and (max-width: 1250px) {
    aside.filtermenu {
       display: none;
    }
}

@media screen and (max-width: 766px) {
    .productlist img {
       width: 15rem;
    }

    div.infoimage {
        width: 15rem;
     }

     section.productlist {
        justify-content: space-around;
    }
}

@media screen and (max-width: 580px) {
    .productlist img {
       width: 9rem;
    }
    div.infoimage {
        width: 9rem;
     }

}

@media screen and (max-width: 768px) {
    .infoimage a {
       padding: 0.3rem 1rem 0.3rem 1rem;
       font-size: 0.8rem;
    }
}



@media screen and (max-width: 768px) {
    .pagebutton-desktop {
       display: none;
    }
}

@media screen and (min-width: 768px) {
    .pagebutton-mobil {
       display: none;
    }
}









/* ------------------------------------------------------product.html-----------------------------------------------------*/



    div.smallimages {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 2vw;
}


div.productimages {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2vw;
}



.smallimages img {
    flex: 33.3%;
    width: 100px;
    height: auto;
    display: inline-block;
}

.smallimages img:hover {
    border: black double 5px;
}




.productsiteimage img {
    max-width: 400px;
    display: block;
}


h2.h2product {
    font-size: 2rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.01rem;
    margin-top: 2rem;
    
}

.pproduct {
    font-size: 1.4rem;
    font-weight: 600;
}

select#size  {
    margin-right: 2rem;
}

#addtocartbutton {
    display: block;
    width: 12rem;
    height: 3rem;
    text-decoration: none;
    background-color: var(--checkout);
    color: white;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 600;
    overflow: hidden;
    padding: 1rem 1.6rem 1rem 1.8rem;
    font-family: sans-serif;
    letter-spacing: 0.1rem;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    margin-top: 3rem;
}




.smalltext {
    padding-top: 3rem;
    font-size: 0.1rem;
    text-align: end;
}

.informationtextproduct {
    padding-top: 0.5rem;
    font-size: 0.8rem;
    color: black;
    text-align: justify;
}

.productinfoboxes a {
    display: block;
    width: 80%;
    height: 2.5rem;
    border: black solid 1px;
    text-decoration: none;
    background-color: white;
    color: black;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.8rem 1.5rem 0.8rem 1.5rem;
    letter-spacing: 0.1rem;
}


h3 {
    font-size: 1.5rem;
    text-align: center;
    padding-bottom: 2rem;
    padding-top: 4rem;
}


.youmightalsolikeimage img {
    max-width: 250px;
}

.youmightalsolikeimages {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
    justify-content: center;
}

.img3, .img2, .img1 {
    flex: 33.3%;
}

div.img1, div.img2, div.img3 {
    width: 160px;
    height: 150px;
    text-align: center;
    padding: 1rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15vw;
}

.infoimage p {
    margin: 0%;
}

p.prize {
    font-size: 20px;
    padding-top: 0.5rem;
    font-weight: 600;
    padding-bottom: 1rem;
}

.youmightalsolikeimage a {
    display: inline-block;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 1rem;
    padding: 0.7rem 2rem 0.7rem 2rem;
    background-color: var(--coldrose);
    color: black;
    letter-spacing: 0.1rem;
    font-weight: 600;
}



/*Responsiveness*/

@media screen and (min-width: 900px) {
    .productsection {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media screen and (min-width: 900px) {
    div.productinfo {
        flex: 50%;
    }
}

@media screen and (min-width: 900px) {
    div.productimages {
        flex: 50%;
    }
}


@media screen and (max-width: 416px) {
    .productsiteimage img {
        max-width: 300px;
    }
}


/*--------------------------------------------------------------Shoppingcart------------------------------------------------------*/

.shoppingcartmain {
    margin-left: 10rem;
    margin-right:10rem;
}


.checkoutimage img {
    width: 9rem;
    height: auto;
    display: block;
    margin-left: 5rem;
    margin-top: 3.2rem;
    outline: solid white 1px;
}

.cartcheckout {
    background-color: var(--coldrose);
    width: 90%;
    height: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4rem;
    border: solid black 1px;
}

div.checkoutinfo {
    margin-left: 5rem;
    font-weight: bold;
}

.checkoutinfo {
    color: black;
}

    #x {
        color: black;
        text-decoration: none;
        padding: 0.3rem 0rem 0rem 0.75rem;
        border: solid 1px black;
        margin-right: 2rem;
        display: block;
        width: 2rem;
        height: 2rem;
        margin-top: 2rem;
        float: right;
}

.addremove a {
    text-decoration: none;
    color: black;
    padding: 0.5rem 0.8rem 0.5rem 0.8rem;
    border: solid black 1px;
 
    font-size: 0.8rem;
}

.addremove p {
    display: inline-block;
    color: black;
    margin-left: 1rem;
    margin-right: 1rem;
    font-size: 0.8rem;
  
}

div.addremove {
    
    width: fit-content;
    height: fit-content;
    margin-left: 5rem;
    margin-top: 2rem;
    display: inline;
    font-weight: bolder;
}

p.prizecheckout {
    display: block;
    color: black;
    letter-spacing: 0.1rem;
    font-size: 1.2rem;
    font-weight: bolder;
    margin-right: 1.5rem;
    float: right;
    margin-bottom: 2rem;
}

p.totalsmalltext {
font-size: 0.8rem;
}

.totalamount {
    width: 90%;
    border: solid black 1px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 1.5rem;
}

.totalamount div {
    flex: 50%;
}

.griditall {
    display: grid;
    grid-template-rows: auto auto;
    margin-bottom: 2rem;
}

div.divhøyre {
    text-align: end;
}

div.continueasguest {
    margin-bottom: 2rem;
}

#total {
    letter-spacing: 0.1rem;
    font-weight: bolder;
    font-size: 1.4rem;
}



section.buyerdetails {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    background-color: var(--nearlywhite);
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding: 2rem;
}

.shippingp {
    display: block;
    padding-bottom: 1rem;
}

#zipcode {
    width: 6rem;
    height: 3rem;
    text-align: center;
    margin-right: 1rem;
    display: block;
    margin-left: 4.5rem;
}

a#loadshoppingalternatives {
    text-align: center;
    width: 15rem;
    height: 3rem;
    display: inline-block;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 0.8rem;
    padding: 1rem 1rem 1rem 1rem;
    background-color: var(--coldrose);
    color: black;
    letter-spacing: 0.1rem;
    font-weight: 600;
    display: block;
}


#continueasguest {
    text-align: center;
    width:11rem;
    height: 3rem;
    display: inline-block;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 0.8rem;
    padding: 1rem 1rem 1em 1rem;
    background-color: var(--nearlyblack);
    color: white;
    letter-spacing: 0.1rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 4rem;
}

div.continueasguest {
    font-size: 1.5rem;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
}



#signupform {
    background-color: var(--coldrose);
    padding: 1rem;
    width: 20rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

form#signupform ul {
    list-style: none;
    padding: 0;
}

#signupform {
  
    border: 1px var(--nearlyblack) solid;
    font-size: 1rem;
    letter-spacing: 0.2rem;
}


fieldset#signupformfieldset {
    width: 15rem;
}


input#name, input#email, input#phonenumber {
    width: 15rem;
    height: 1.6rem;
}

input#name:hover, input#email:hover, input#phonenumber:hover {
    background-color: var(--nearlywhite);
    outline-style: solid;
    outline-color: grey;
    outline-width: 0.1rem;
}

li {
    padding-bottom: 1rem;
}


div.termsandconditions {
    margin-top: 4rem;
    margin-bottom: 4rem;
    background-color: var(--nearlywhite);
    padding: 3rem;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}


input#agree {
    outline: red groove 2px; 
    margin-top: 2rem;
}

#checkoutform {
    font-family: var(--breadfont);
    font-size: 1.2rem;
}

div.termsandconditions a {
   color: black;
}

#checkout {
    display: block;
    width: 18rem;
    height: 4rem;
    text-decoration: none;
    background-color: var(--checkout);
    color: white;
    font-size: 1.2rem;
    text-transform: uppercase;
    font-weight: 600;
    padding: 1.2rem 1.5rem 0.8rem 1.5rem;
    font-family: sans-serif;
    letter-spacing: 0.1rem;
    margin-right: auto;
    margin-left: auto;
    margin-top: 2rem;
    text-align: center;
    margin-bottom: 4rem;
}



#homelink a {
    display: block;
    width: 5rem;
    height: 3rem;
    margin-left: auto;
    margin-right: auto;
    color: black;
}

#homelink {
    text-align: center;
}



/*Responsiveness*/

@media screen and (max-width: 600px) {
    div.checkoutinfo, div.addremove, .checkoutimage img {
        margin-left: 1rem;
    }
    p#total {
        margin-bottom: 0;
    }
    p.totalsmalltext {
        margin-top: 0;
    }
}


@media screen and (max-width:837px) {
    .shoppingcartmain {
        margin: 0;
    }
}



/*-----------------------------------------------------Success----------------------------------------------------------*/


.successmain {
    margin-left: 5rem;
    margin-right: 5rem;
}

.orderinfo {
    background-color: var(--coldrose);
    padding: 4rem;
}

.headline {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.05rem;
}

.orderinfo p {
    margin-bottom: 2rem;
}

p.number {
    margin-bottom: 3rem;
}

p.smalltextsuccess {
    margin-bottom: 4rem;
}

.orderinfo a {
    color: black;
    font-weight: 600;
}

h3 {
    text-align: center;
    margin-bottom: 3rem;
}

.furtherinfo {
    text-align: center;
    font-size: 1.1rem;
    margin-top: 4rem;
    margin-bottom: 2rem;
}

.furtherinfo a {
    color: black;
}

.orderlink {
    padding-bottom: 2rem;
}


img.successlogo {
    display: block;
    width: 6rem;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
}



@media screen and (max-width:837px) {
    .successmain {
        margin: 0.6rem;
    }
}

@media screen and (max-width:600px) {
    section.orderinfo {
        padding: 2rem;
    }
}


/*------------------------------------------------------About us --------------------------------------------------------*/

.aboutusbody {
background-color: white;
}
.aboutusmain {
    margin: 0rem 3rem 1rem 3rem;
}

.hrforaboutus {
    width: 60%;
    margin-top: 5rem;
    margin-bottom: 5rem;
}



.h1aboutus {
    position: absolute;
    padding: 0;
    margin: 0;
    top: 48vw;
    left: 38%;
    color: white;
}

.whoareweimage img {
    display: inline-block;
    width: 100%;
    height: auto;
    position: relative;
}


div.whoarewep {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3rem;
    text-align: center;
}


div.whoarewep ul {
    list-style: none;
    padding: 2rem 0 2rem 0;
}


div.whoarewep li {
    padding-bottom: 1rem;
    font-size: 1.2rem;
    display: inline;
    margin-right: 2rem;
}

.ourproductsaboutus {

    display: block;
    width: 12rem;
    text-decoration: none;
    text-align: center;
    padding: 0.8rem 1.5rem 0.8rem 1.5rem;
    background-color: var(--coldrose);
    font-size: 0.8rem;
    text-transform: uppercase;
    color: black;
    font-weight: 600;
    box-shadow: white;
    letter-spacing: 0.15rem;
    margin-left: auto;
    margin-right: auto;
}


.sectiontextaboutus {
    display: flex;
    flex-direction: row;
    gap: 3rem;
    padding: 1rem;
}

div.ourvision, div.ourstory {
    background-color: white;
    padding: 2rem;
    text-align: justify;
    border: black double 8px;
}


.h2ourvision, .h2ourstory {
    width: 50%;
    height: 4rem;
    padding-top: 0.5rem;
    color: var(--nearlyblack);
    padding-top: 0.6rem;
}


@media screen and (max-width: 1000px) {
    .sectiontextaboutus {
        flex-direction: column;
    }
}

@media screen and (max-width: 1215px) {
    div.whoarewep li {
        display: block;
    }
}

@media screen and (max-width: 600px) {
    div.whoarewep {
        width: 100%;
    }
}

@media screen and (max-width: 525px) {

    .aboutusmain {
        margin: 0;
    }
    h2.h2ourvision, h2.h2ourstory {
        font-size: 2rem;
    }
    div.ourstory, div.ourvision {
        padding: 1rem;
    }
}




/*------------------------------------------------------Customer Service-----------------------------------------------------------*/


.customerservicemain {
    margin-left: 3rem;
    margin-right: 3rem;
}


.getintouchright i {
    color: black;
    margin-right: 2vw;
}

.shippingreturns i {
    color: black;
    font-size: 0.8rem;
    margin-left: 2px;
}

section.getintouchsection {
    width: 100%;
    height: 30rem;
    position: relative;
    background-image: url(images.img/mohamed-ziyan-ayTl3SMXCoc-unsplash\ full.jpg);
    background-size: cover;
}

div.divwithimage {
    width: 90%;
    height: 24rem;
    position: absolute;
    top: 10%;
    left: 5%;
    background-color: var(--coldrose);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

div.getintouchleft {
    flex: 50%;
    text-align: center;
}


div.getintouchright {
    flex: 50%;
}

p.getintouchp {
    font-family: var(--uppercaseheader);
    font-size: 3rem;
}

#openinghours {
    font-size: 0.8rem;
}


div.divwithform {
    width: 100%;
    height: 26rem;
    background-color: var(--coldblue);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    margin-top: 3rem;
    padding: 2rem;
}

form#contactform ul {
    padding: 0;
}


input#contactname, input#contactemail, input#contactnumber {
    width: 18rem;
    height: 3rem;
}

#contacttextarea {
    color: grey;
}

#contactsubmit {
    width: 10rem;
    height: 1.5rem;
    text-transform: uppercase;
    background-color: #0E1619;
    color: white;
    font-weight: 600;
    padding: 0.5rem 2rem 2rem 2rem;
    font-family: var(--breadfont);
    font-size: 1rem;
    border: none;
}

#contactsubmit:hover {
    background-color: white;
    color: black;
}



section.shippingreturns {
    width: 100%;
    height: fit-content;
    border: solid #0E1619 1px;
    margin-top: 3rem;
    padding: 3rem;
    margin-bottom: 5rem;
}

p.shippingandreturnsheader {
    text-align: center;
    font-family: var(--fancyheader);
    font-size: 1.5rem;
}

.shippingreturns ul {
    list-style: none;
    padding: 0;
    margin-top: 2rem;
}

.shippingreturns li {
    width: 20rem;
    border: solid 1px black;
    padding: 1rem;
    font-family: var(--uppercaseheader);
    letter-spacing: 0.1rem;
}


#checkmark {
    color: black;
    font-size: 0.8rem;
    margin-right: 0.5rem;
    color: grey;
}

@media screen and (max-width:650px) {
    div.divwithimage {
        display: flex;
        flex-direction: column;
    }
    p.getintouchp {
        padding-top: 3rem;
        font-size: 2.5rem;
    }
    .customerservicemain {
        margin: 0;
    }
}

@media screen and (max-width: 565px) {
    section.shippingreturns {
        padding: 0.5rem;
        margin-top: 10rem;
    }
    p.getintouchp {
        padding-top: 2rem;
    }
}