header{
    /* Bildet er tatt av <a href="https://pixabay.com/no/users/markmags-2013644/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=1182713">Mark Mags</a> fra <a href="https://pixabay.com/no//?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=1182713">Pixabay</a> */
    background-image: url(../bilder/analyse.jpg);
}

#text-box p{
    color: black;
}

#text-box{
    background-color:rgba(255, 255, 255, 0.712) ;
}

.parent-art{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    background-color: #f5f5f5;
}

.parent-art article{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 65%;
}

.parent-art article h3{
    width: 100%;
    font-size: 21px;
    margin: 20px 0;
    color: rgb(0, 0, 0);
}

.parent-art article p a{

    color: black;

}



.parent-art article h4{
    display: block;
    width: 100%;
    font-size: 21px;
    margin: 20px 0;
    color: rgb(110, 110, 110);

}

.parent-art article h1{
    margin-top: 3rem;
    width: 100%;
    font-size: 40px;
}

.parent-art article p{
    line-height: 1.6;
    color: #505050;
}

.delings-knaper{
    width: 100%;

    display: flex;
    flex-direction: row;
    justify-content: flex-start;


}

.delings-knaper a{
    padding: 20px 30px 20px 0;
    
}

.delings-knaper a i{
    color: black;
}

.image-section{

    width: 100%;
    height: auto;

}

.image-section figure{
    width: 100%;
    margin: 20px 0;

}


.image-section figure img{
    width: 50%;
    height: auto;
}


#cms-hedear{

    display: flex;
    flex-direction: row;
    background-color: rgb(255, 255, 255);
    grid-area: header;
    /* Bildet som er brukt er designet selv i Canva.com */
    background-image: url(../bilder/cms-header.jpg);
    background-size: cover;
    background-size: 100%;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    height: 86vh;

}

#uu-vs-seo-hedear{

    display: flex;
    flex-direction: row;
    background-color: rgb(255, 255, 255);
    grid-area: header;
    /* Bildet som er brukt er designet selv i Canva.com */
    background-image: url(../bilder/uu-vs-seo.jpg);
    background-size: cover;
    background-size: 100%;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    height: 86vh;

}

#last-ljein{
    padding-bottom: 10rem;
}

.parent-art ul{
    padding-left: 0;
}
.parent-art ul li{
    margin: 20px;
    color: #505050;
}






.kilde-a{
    padding-left: 20px;
}

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

    .parent-art article{

        width: 75%;
    }
    
 }

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

    .parent-art article{

        width: 85%;
    }

    .parent-art article h3{

        text-decoration: none;
        line-height: 1.4;
 
    }

    .parent-art article h3{

        text-decoration: none;
        line-height: 1.4;
 
    }
    
    .parent-art article h4{

        text-decoration: none;
        
 
    }
 }







 .containe {
    display: grid;
    grid-template-columns: 100px 1fr 1fr 1fr;
    grid-template-rows: 100px 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: 
    " side fordeler ulemper likheter-ulikheter"
    "cms1 div7 div8 div9" 
    "cms2 div10 div11 div12"
    "cms3 div13 div14 div15"
    "cms4 div16 div17 div18"
    "cms5 div19 div20 div21"
    ;
    
    width: 100%;
    height: 100%;
    grid-gap: 2px;
}

.containe div figure{
    display: flex;
    justify-content: center;
    align-items: center;



}

.containe div figure img{
    width: 90%;
}




 #parent {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin: 30px;

}

#parent h1{
    margin: 3rem 0;

}
.cms1{
    background-color: rgb(247, 247, 247);
    text-align: center;
    grid-area: cms1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;

}
.cms2 {
    background-color: rgb(247, 247, 247);
    text-align: center;
    grid-area: cms2;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}
.cms3 {
    background-color: rgb(247, 247, 247);
    text-align: center;
    grid-area: cms3;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}

.cms4{
    background-color: rgb(247, 247, 247);
    text-align: center;
    grid-area: cms4;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    
}

.cms5{
    background-color: rgb(247, 247, 247);
    text-align: center;
    grid-area: cms5;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}

.side{

    background-color: rgb(247, 247, 247);
    text-align: center;
    grid-area: side;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;

}

.fordeler {
    background-color: rgb(247, 247, 247);
    text-align: center;
    grid-area: fordeler;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}


.ulemper {
    background-color: rgb(247, 247, 247);
    text-align: center;
    grid-area: ulemper;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}


.likheter-ulikheter {
    background-color: rgb(247, 247, 247);
    grid-area: likheter-ulikheter;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}

.c{
    background-color: rgb(247, 247, 247);
}

.div-p{
    margin: 15px;
    line-height: 1.6;
    color: #505050;
}
.div7 {
    grid-area: div7;
   
}
.div8 {
    grid-area: div8;
}
.div9 {
    grid-area: div9;
}
.div10 {
    grid-area: div10; 
}
.div11 {
    grid-area: div11;
}
.div12 {
    grid-area: div12;
}
.div13 {
    grid-area: div13;
}
.div14 {
    grid-area: div14;
}
.div15 {
    grid-area: div15;
}

.div16{
    grid-area: div16;

}
.div17{
    grid-area: div17;
    
}
.div18{
    grid-area: div18;
    
}
.div19{
    grid-area: div19;
    
}
.div20{
    grid-area: div20;
    
}
.div21{
    grid-area: div21;
    
}



h4{
    display: none;
}



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

    .containe {
         display: grid;
         gap: 20px;
         grid-template-columns: 1fr;
         grid-template-rows: 60px 1fr 1fr auto 60px 1fr 1fr auto 60px 1fr 1fr auto 60px 1fr 1fr auto 60px 1fr 1fr auto;
         grid-template-areas: 

         "cms1"
         "div7"
         "div8"
         "div9"

         "cms2"
         "div10"
         "div11"
         "div12"


         "cms3"
         "div13"
         "div14"
         "div15"

         "cms4"
         "div16"
         "div17"
         "div18"

         "cms5"
         "div19"
         "div20"
         "div21"
 
         ;
 
     } 

    .side{
        display: none;
    }


     .fordeler {
         display: none;
     }
 
     
     .ulemper {

         display: none;

     }
 
     .likheter-ulikheter {
         display: none;
     }

     h4{
         margin: 12px;
         display: block;
         color: rgb(0, 0, 0);
         font-size: 18px;
    }

    .cms1{
        background-color: rgb(43, 43, 43);
        border-radius:13px;
    }
    .cms2{
        background-color: rgb(43, 43, 43);
       
    }
    .cms3{
        background-color: rgb(43, 43, 43);
        
    }

    .cms4{
        background-color: rgb(43, 43, 43);
        
    }

    .cms5{
        background-color: rgb(43, 43, 43);
        
    }

    h3{
        color: rgb(253, 253, 253);
    }

    .shadow {
        box-shadow: 8px 13px 15px -4px rgba(0,0,0,0.1);
        border-radius:13px;
    }


 } 

#ab{

    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(27, 27, 27);
    width: 100%;
    height: auto;
    

}

#abn{
    padding: 50px;
}

 #abn h2{

    color: white; 
    text-align: center;
 }

 #abn p{

    color: white;

    

     
}

#abn p a{

    color: red;
    

     
}