header {
    /* bilden er designt selv i canva.com */
    background-image: url(../bilder/cms-header.jpg);
}

#ext-box p{
    color:white;
}

.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: 55%;
}

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

.parent-art article h4{
    display: block;
    width: 100%;
    font-size: 21px;
    margin: 20px 0;


}

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


.parent-art article p{
    line-height: 1.6;
    color: rgb(78, 78, 78);
}



.parent-art article figure{
    width: 100%;
    margin: 0;

}

.parent-art article figure img{
    width: 100%;

}

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

.parent-art article figure{
    margin: 0;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    

}
.parent-art article figure img{
    width: 40%;
}

.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;
}

#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.png);
    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.png);
    background-size: cover;
    background-size: 100%;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    height: 86vh;

}

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

.span-title{
    color: rgb(0, 0, 0);
    font-size: 20px;
}

.kilde-a{
    color: rgb(0, 0, 0);
    
}


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






/* tabel design */


#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;
}

.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;
}



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;
         grid-template-areas: 

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

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


         "cms3"
         "div13"
         "div14"
         "div15"
 
         ;
 
     } 


     .fordeler {
         display: none;
     }
 
     
     .ulemper {

         display: none;

     }
 
     .likheter-ulikheter {
         display: none;
     }

     h4{
         margin: 12px;
         display: block;
         color: rgb(0, 0, 0);

    }

    .cms1{
        background-color: rgb(43, 43, 43);
        border-radius:13px;
    }
    .cms2{
        background-color: rgb(43, 43, 43);
       
    }
    .cms3{
        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;
    }


 } 


 @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;
        
 
    }
 }