body {
    background: #86C4FF;
    font-family: Nunito;
}
*{
    box-sizing: border-box;
    margin: 0;
}

.grid {
    align-items: center;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 10px;
    background-color: #86C4FF;
    text-align: center;
    height: 100%;

}
.cell {
    background-color: #86C4FF;
    height: 100%;
    place-items: center; 
}

                                         /* default - small devices */

[class*="col"] {
    grid-column-end: span 12;
}

                                            /* below 600px  TABLET*/

@media only screen and (max-width: 600px) {
    .sm1 {
        grid-column-end: span 12;
    }
    .sm2 {
        grid-column-end: span 6;
    }
    .sm3 {
        grid-column-end: span 4;
    }
    .sm4 {
        grid-column-end: span 3;
    }
    .sm6 {
        grid-column-end: span 2;
    }
    .sm12 {
        grid-column-end: span 1;
    }
}
.sm11 {
        grid-column: 11/ span 2;
    }
.sm2onespan6 {
        grid-column: 1/ span 6;
    }
.smstart3 {
        grid-column: 5/ span 4;
        
    }
.smstart9 {
        grid-column: 10/ span 3;
    }
.smstart6 {
        grid-column: 1/ span 2;
    }
.smtwo12 {
        grid-column-end: 2/ span 1;
    }
    
    .smthree12 {
        grid-column-end: 3/ span 1;
    }
    
    .smfour12 {
        grid-column: 4/ span 1;
    }
    
    .sm7span4 {
        grid-column: 1/ span 4;
    }


                                          /* above 601px  TABLET*/

@media only screen and (min-width: 601px) {
    .md1 {
        grid-column-end: span 12;
    }
    .md2 {
        grid-column-end: span 6;
    }
    .md3 {
        grid-column-end: span 4;
    }
    .md4 {
        grid-column-end: span 3;
    }
    .md6 {
        grid-column-end: span 2;
    }
    .md12 {
        grid-column-end: span 1;
    }
    .md6half {
        grid-column-end: span 1/2;
    }
.md11 {
        grid-column: 11/ span 2;
    }
.md2onespan6 {
        grid-column: 1/ span 6;
    }
.mdstart3 {
        grid-column: 5/ span 4;
        
    }
.mdstart9 {
        grid-column: 10/ span 3;
    }
.mdstart6 {
        grid-column: 1/ span 3;
    }
.mdtwo12 {
        grid-column-end: 2/ span 1;
    }
    
    .mdthree12 {
        grid-column-end: 3/ span 1;
    }
    
    .mdfour12 {
        grid-column: 4/ span 1;
    }
    
    .md7span4 {
        grid-column: 1/ span 4;
    }
}
                                      /* above 1025px DESKTOP*/

@media only screen and (min-width: 1025px) {
    .col1 {
        grid-column: 11/ span 2;
    }
    .col2 {
        grid-column-end: span 6;
    }
    
    .col2onespan6 {
        grid-column: 1/ span 6;
    }
    
    .col3 {
        grid-column-end: span 4;
    }
    .colstart3 {
        grid-column: 6/ span 2;
        
    }
    
    .colstart7 {
        grid-column: 7/ span 3;
    }
    
    .colstart9 {
        grid-column: 10/ span 3;
    }

    .col4 {
        grid-column-end: span 3;
    }
    .col6 {
        grid-column-end: span 2;
    }
    
    .colstart6 {
        grid-column: 1/ span 2;
    }
    .col12 {
        grid-column-end: span 1;
    }
    
    .coltwo12 {
        grid-column-end: 2/ span 1;
    }
    
    .colthree12 {
        grid-column-end: 3/ span 1;
    }
    
    .colfour12 {
        grid-column: 5/ span 1;
    }
    
    .col7span4 {
        grid-column: 7/ span 4;
    }


    }

                                                    /* Nav */
#nav-trigger {
    display: none;
    
}
.nav-trigger {
    position: absolute;
}
label[for="nav-trigger"] {
    position: fixed;
    right: 15px;
    top: 15px;
    z-index: 200;
    cursor: auto;
    color: #003767;
}
.nav-trigger + label,
.navigation {
    transition: right 0.4s;
}
.nav-trigger:checked + label {
    right: 215px;
}
.nav-trigger:checked ~ .navigation {
    right: 0;
}
nav ul {
    list-style-type: none;
    padding: 0;
    /*    new*/
    margin: 0;
    width: 200px;
    height: 100%;
    position: fixed;
    top: 0;
    right: -200px;
    bottom: 0;
    z-index: 200;
    text-align: left;
    background: #FFF3E4;
}
nav li {
    margin: 10px 0;
 
}
a {
    display: block;
    width: 100%;
    text-decoration: none;
    padding: 10px 20px;
    color: #9497B4;
    background: #FFF3E4;
    transition: all 0.7s;
    text-align: center;
}
a:hover {
    color: #fff;
    background: #003767;
}

                                               /* Edit on text */
ul.nobullet {
     list-style-type: none;
    padding: 0;
    margin: 10px;
    text-align: center;
}
.center {
        text-align: center;
    } 
.top {
    
    top: 0;
    text-align: center;
    align-content: center;
    grid-column-end: span 12;
}

    
                                           /* Visual Image adjustments */
.images {
max-width: 100%;
   
}    
.sns {
     align-items: center;
    max-width: 100%;
    padding: 0;

    }   
.issue {
        height: 112px;
        width: 368px;
        max-width: 100%;
    object-fit: contain;
    /*object-fit: scale-down;*/
    }
.logo {
    align-items: center;
    /*border-radius: 50%;*/
        max-width: 100%;
}
 
    

                                           /* Samatics */
    h1 {
        color: #003767;
        max-width: 100%;
        text-align: center;
      
        
    }
    h2 {
        color: #003767;
        max-width: 100%;
        text-align: center;
        
    }
    p {
        color: #003767;
        max-width: 100%;
        text-align: center;
    }
h3{ color: #003767;
        max-width: 100%;
        text-align: center;
    
}