@font-face {
    font-family: 'Lily'; /*a name to be used later*/
    src: url('fonts/LilyScriptOne-Regular.ttf'); /*URL to font*/
}

*
{
    font-family:helvetica;
}
body
{       
    line-height:1.5;
   /*font:15px/1.5 Arial,helvetica, sans-serif*/
    margin:0;
    padding:0;
    background: white;
   

}
a
{
    text-decoration: none;
}

p
{
    font-family: 'Noto Sans', sans-serif;
}

h2, a
{
    font-family: 'Arimo', sans-serif;

}
.grid-container
{
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
}


#cc
{
    width: 100%;
    height:100%;
    display: flex;
    flex-flow: column;
    justify-content: center; /* align horizontal */
    align-items: center;    

}

.icon
{
    max-width: 32px;
    max-height: 32px;
}

#items
{
    width: 100%;
    display: flex;

}

#items div h2
{
    font-size: 15px;
    color: #333;
    line-height:0.8;

}

#items div p
{
    margin:0;
    font-size: 13px;
    color: #575757;
    max-width: 80%;

}
#items div
{ 
    display:block;
    max-width: 60%;
    margin:10px;
    width: 100%;   
}



#header
{
    width:100%;
    grid-row: 1;
    grid-column: 1 / span 5;
    align-items: left;
    justify-self: left;
    align-self: center;
    background: white; 
    
    display:grid;
}
#header #menu-right
{
    grid-row:1;
    grid-column:2;
    margin:20px;
    align-items: right;
    justify-self: right;
    align-self: right;
}
#header #menu-left
{
    grid-row:1;
    grid-column:1;
    margin:20px;
  align-items: left;
    justify-self: left;
    align-self: left;
}

#header #menu-right a,
#header #menu-left a
{
    font-weight: bold;
    color: #333;
    padding: 10px;   
}

#header #menu-right a:active,
#header #menu-left a:active
{
    font-weight: bold;
    color: red;
    padding: 10px;   
}

#secAA
{
    width:100%;
    height: 100%;
    grid-row: 2;
    grid-column: 1 / span 2;
    background: white;
}

#secAA #cc #txt img
{   
    padding:10px;
    max-width: 48px;
    height: auto;
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;    
}

#secAA #cc #txt
{
    width:auto;
    display: inline;
    margin:10px;
    padding: 20px;
}

#secAA #cc #txt p
{
    font-size: 1em;
    font-weight: light;
    color: #575757;
    margin-left:10px;
    text-align:left;

}

#secAA #cc #txt h2
{
    font-family: 'Poppins', sans-serif;
    font-size: 3em;
    color: #333;
    text-align:left;
    line-height:1;
    margin:0;
    font-weight: bolder;
    padding: 5px;    
}

#secAB
{     
    grid-row: 2;
    grid-column: 3 / span 5; 
    width:100%;
    height: 100%; 
    background: white;    
}

#secAAA
{
    padding: 20px; 
    grid-row: 3;
    grid-column: 1 /span 3;
    background: white;    
}

#secAAB
{
    width:100%;
    height: 100%;
    grid-row: 3;
    grid-column: 4 /span 5;
    background: white;  
}

#secBA
{
    padding:5%; 
    margin: 0;
    grid-row: 4;
    grid-column: 1 /span 5;
    background: white;
}

#secCA
{
    padding:20px; 
    grid-row: 5;
    grid-column: 1 /span 3;
    background-color : #9e74c2
}

#secCB
{
    width:100%;
    height: 100%;
    grid-row: 5;
    grid-column: 4 /span 5;
    background-color :#9e74c2

}

/*SEC D*/

#secDA
{
    padding:80px;    
    grid-row: 6;
    grid-column: 1 /span 5;
    background: white;
}


/*SEC E*/

#secEA
{
    padding:20px; 
    grid-row: 7;
    grid-column: 1 /span 3;
    background: #53baff;    
}


#secEB
{
    width:100%;
    height: 100%;
    grid-row: 7;
    grid-column: 4 /span 5;
    background: #53baff;
}


/*SEC F*/

#secFA
{
    height: 600px;
    width:100%;
    grid-row: 8;
    grid-column: 1 / span 2;
    background: #ededed;    
}



#secFB
{     
    height: 600px;
    grid-row: 8;
    grid-column: 3 / span 5; 
    width:100%;
    background: #ededed;
}


/*SEC G*/

#secGA
{
    grid-row: 9;
    grid-column: 1 /span 5;
    background: white;
    margin:0;
}


#secGGA
{ 
    padding: 15%;
    grid-row: 10;
    grid-column: 1 /span 5;
    background: #1c212a;
}

#secGGA #cc #items div h2,
#secGGA #cc #items div a

{
    color: white;
}

#secGGA #cc #items div p,
#secGGA #cc #items div a
{
    color: #dedede;
}


/*SEC FOO*/

#footer
{
    padding:80px;
    grid-row: 11;
    grid-column: 1 /span 5;
    background:#14181f;
    margin:0;
}


#footer #cc #items div h2
{
    color: white;
}

#footer #cc #items div p
{
    color: #dedede;
}



#secFB #cc img,
#secGA #cc img,
#secFA #cc #txt img,
#secEA #cc img,
#secAB #cc img,
#secAAA #cc img,
#secCA #cc img
{
    max-width: 100%;
    height:auto;
  /*  image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;*/
}

/*@media only screen and (max-width : 20000px) 
{
#secFB #cc img,
#secGA #cc img,
#secFA #cc #txt img,
#secEA #cc img,
#secAB #cc img,
#secAAA #cc img,
#secCA #cc img
{
    max-width: 100%;
    height:auto;
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}
}*/


#secFA #cc #txt,
#secEB #cc #txt,
#secAAB #cc #txt,
#secCB #cc #txt
{
    width: auto;
    display: inline;
    margin: 10px;
    padding: 20px;
}

#secFA #cc #txt p a,
#secEB #cc #txt p a,
#secAAB #cc #txt p a,
#secCB #cc #txt p a
{
    text-decoration: none;
    color: inherit;
}

#secFA #cc #txt p,
#secEB #cc #txt p,
#secAAB #cc #txt p,
#secCB  #cc #txt p
{
    font-size: 1em;
    font-weight: light;
    color: white;
    margin-left:10px;
    text-align:left;
}


#secFA #cc #txt h2,
#secEB #cc #txt h2,
#secAAB #cc #txt h2,
#secCB #cc #txt h2
{
    font-family: 'Poppins', sans-serif;
    font-size: 3em;
    color: white;
    text-align:left;
    line-height:1;
    margin:0;
    font-weight: bolder;
    padding: 5px;    
}

#secAAB #cc #txt h2,
#secFA #cc #txt h2,
#secAAB #cc #txt p,
#secFA #cc #txt p
{
color: #333
}

#secCA #cc img,
#secEA #cc img,
#secAAA #cc img
{
    padding: 15%;  

}


#secAAA #cc img
{
    max-width: 70%;
    height:auto;
}

a:hover
{   
   border: solid;
   border-width: 0 0 4 0;
   border-color: inherit;
}