/****************************
****  Layout Classes *******
****************************/

[class*="grid"]{
    display: grid;
}

.grid-even-cols{
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

.grid-1fr-auto{
    grid-template-columns: 1fr auto;
}

.grid-auto-col{
    grid-auto-flow: column;
}

.grid-auto-row{
    grid-auto-flow: row;
}

.grid-12{
    grid-template-columns: repeat(12, 1fr);
}

.grid-10{
    grid-template-columns: repeat(10, 1fr);
}

.grid-5{
    grid-template-columns: repeat(5, 1fr);
}

.grid-3{
    grid-template-columns: repeat(3, 1fr);
}

.grid-2{
    grid-template-columns: repeat(2, 1fr);
}

.grid-1{
    grid-template-columns: repeat(1, 1fr);
}

/* Grid Gaps */
.grid-gap-1{
    grid-gap: 1rem;
}

.grid-gap-2{
    grid-gap: 2rem;
}
.grid-gap-3{
    grid-gap: 3rem;
}

/* Columns */
.grid-column-gap1{
    column-gap: 1rem;
}

.grid-column-gap2{
    column-gap: 2rem;
}

.grid-column-gap3{
    column-gap: 3rem;
}

/* Rows */

.grid-row-gap-1{
    row-gap: 1rem;
}

.grid-row-gap-2{
    row-gap: 2rem;
}

.grid-row-gap-3{
    row-gap: 3rem;
}

.row-gap-2{
    row-gap: 2rem;
}

.grid-rows{
    grid-template-rows: auto 1fr auto;
}

.grid-rows-2{
    grid-template-rows: auto 1fr 1fr;
}

.grid-rows-3{
    grid-template-rows: auto auto minmax(0, 1fr);
}



.grid-row{
    row-gap: 0.5rem;
}

/* Container max */
.cont-1-12{
    grid-column: 1/12;
}
.cont-1-11{
    grid-column: 1/11;
}

.cont-1-10{
    grid-column: 1/10;
}

.cont-1-9{
    grid-column: 1/9;
}

.cont-1-8{
    grid-column: 1/8;
}

.cont-2-7{
    grid-column: 2/7;
}
.cont-2-8{
    grid-column: 2/8;
}
.cont-3-5{
    grid-column: 3/5;
}
.cont-3-6{
    grid-column: 3/6;
}
.cont-3-7{
    grid-column: 3/7;
}
.cont-3-8{
    grid-column: 3/8;
}
.cont-3-9{
    grid-column: 3/9;
}
.cont-3-10{
    grid-column: 3/10;
}

.cont-3-11{
    grid-column: 3/11;
}

.cont-4-9{
    grid-column: 4/9;
}
.cont-4-10{
    grid-column: 4/10;
}
.cont-4-11{
    grid-column: 4/11;
}
.cont-6-8{
    grid-column: 6/8;
}

/* Column span */
.col-span-1 { grid-column: span 1;}
.col-span-2 { grid-column: span 2;}
.col-span-3 { grid-column: span 3;}
.col-span-4 { grid-column: span 4;}
.col-span-5 { grid-column: span 5;}
.col-span-6 { grid-column: span 6;} /* Header, Nav, Main and Footer - Children */
.col-span-7 { grid-column: span 7;}
.col-span-8 { grid-column: span 8;}
.col-span-9 { grid-column: span 9;}
.col-span-10 { grid-column: span 10;}
.col-span-12 { grid-column: span 12;}/* Header, Nav, Main and Footer */


/* Colums start and end */
.col-start-1{grid-column-start: 1;}
.col-start-2{grid-column-start: 2;}
.col-start-3{grid-column-start: 3;}
.col-start-4{grid-column-start: 4;}

.quickLaunch{
    grid-column: 10; 
    grid-row: 2/3;
}

.quickLaunch-s{
    grid-column: 12; 
    grid-row: 1/3;
}

.justify-items-center{
    justify-items:center;
}

/* Container */

.cont{
    max-width: 1240px;
    width: 100%;
}


  section{
    container-type: inline-size;
  }


 /* TO DO: Spacing classes for elements */

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

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

.margin-right-1{
    margin-right: 1rem;
}


  @container ( min-width: 450px) {
    section{
        grid-template-columns: auto minmax(225px, 1fr);
       
    }
  }

@media (max-width: 1540px){
    .grid-md-1{
        grid-template-columns: repeat(1, 1fr);
    }

    .grid-auto-col-md{
        grid-auto-flow: column;
    }

    .cont-md-1-9{
        grid-column: 1/9;
    }

    .cont-md-1-10{
        grid-column: 1/10;
    }

    .cont-md-2-7{
        grid-column: 2/7;
    }

    .cont-md-2-8{
        grid-column: 2/8;
    }

    .cont-md-2-10{
        grid-column: 2/10;
    }

    .cont-md-2-11{
        grid-column: 2/11;
    }

    .cont-md-2-12{
        grid-column: 2/12;
    }

    .cont-md-3-10{
        grid-column: 3/10;
    }

    .cont-md-4-10{
        grid-column: 4/10;
    }

    .cont-md-4-12{
        grid-column: 4/12;
    }

    .cont-md-8-10{
        grid-column: 8/10;
    }

    .col-start-md-1{
        grid-column-start: 1
    }

    .col-start-md-2{
        grid-column-start: 2
    }

    
    .col-start-md-1{grid-column-start: 1;}
    .col-start-md-2{grid-column-start: 2;}
    .col-start-md-3{grid-column-start: 3;}

}

@media (max-width: 1100px){
    .col-span-sm-10 { 
        grid-column: span 10
    }
    
    .col-start-sm-1{
        grid-column-start: 1
    }
    
    .cont-sm{
        grid-column: 1/13;
    }

    .cont-sm-1-12{
        grid-column: 1/12;
    }

    .cont-sm-1-11{
        grid-column: 1/11;
    }

    .cont-sm-1-10{
        grid-column: 1/10;
    }

    .cont-sm-2-11{
        grid-column: 2/11;
    }

    .cont-sm-2-12{
        grid-column: 2/12;
    }

    .cont-sm-1-8{
        grid-column: 1/8;
    }

    .cont-sm-1-7{
        grid-column: 1/7;
    }
    
    .grid-gap-m-1{
        grid-gap: 1rem;
    }

   
    

    header{
        .logo__list{
        
            padding: 0 2rem;
        }
    }

    .banner{
        h1{
            padding: 0 2rem;
        }
    }

    section, .solutionsWrap, .latestUpdates{
        padding: 0 2rem;
    }
}

@media (max-width: 768px){

    .quickLaunch-s{
        grid-column: 1/11; 
        grid-row: 3;
    }

    .grid-xs-1{
        grid-template-columns: repeat(1, 1fr);
    }

    .cont-xs{
        grid-column: 1/13;
    }
    
    .grid-gap-0{
        grid-gap: 0;
    }


    .grid-xs-rows{
        grid-template-rows: auto 1fr auto;

    }



  /*********************************************************
 ****** Mobile nav ***************************************
*******************************************************/

 header{
        nav{
            ul.nav__list{
               display:block;
            }
        }
    }


   /* footer{
         .LSEGlogoFooter{
           /*grid-column: 1;
           
        }
        & > nav{
            /* grid-column: 4/13; 
        } 
    }*/
}


.flex{
    display: flex;
}

.flex-direction-column{
    flex-direction: column;
}
.flex-justify-even{
    justify-content: space-evenly;
}

.flex-justify-between{
    justify-content: space-between;
}

.center-self{
    align-self: center;
    justify-self: center;
}

.align-center{
    align-items: center;
}

.justify-self-end{
    justify-self: end;
}

.aling-self-f-start{
    align-self: flex-start;
}