body {
margin:0 ;
   
}

.sacmwraptrans {
    width: 80rem;
padding: 0 1em;
background-color: rgb(255,255,255, .5);


}

.nospace {
    padding-left: 10px!important;
    padding-right: 10px!important;
}

.sacmwraptrans2 {
    width: 70rem;
    margin: 0 auto;
padding: 0 1em;
background-color: rgb(255,255,255, .4);


}

.sacmwraptrans3 {
    width: 70rem;
    margin: 0 auto;
padding: 0 1em;
background-color: rgb(255,255,255, .7);


}

.sacbgwhite {
       width: 70rem;
    margin: 0 auto;
padding: 0 1em;
    background-color: #ffffff;
}

.sacmwrap {
    margin: 0 auto;
    padding: .5rem 1rem 1rem 1rem;
}

.colspace {
    padding: 0 2em;
}

.topcolspace {
      padding: .5em 2em 0 2em;
}


.down {
    padding:2em 0 0 2em;
}

.down a {
    color:aquamarine;
}

.logo {
    width: 100%;
    height: auto;
}

.righttext {
    text-align: right;
    font:normal .8em arial;
    color:#669966;
}

.greenline {
  border-top: 3px solid #518b50;
    
}

.topspace {
    padding-top: 2em;
}

.sacmlogo {
        width: 50%;
    }

.bgfade {
    
    background-image: url(../images/isbg5.jpg);
    background-repeat: repeat-x;
     background-position: top;
    padding-top: .5em;
}

.bgfade2 {
    
    background-image: url(../images/isbg4.jpg);
   background-position: top;
    background-repeat: repeat-x;
   
}

.bgfade3 {
    
    background-image: url(../images/isbg6.jpg);
   background-position: top;
    background-repeat: repeat-x;
   
}



.jumbotron {

    padding: 1em 3em;
    margin: 0;
}


.nopad {
 padding-top: 0; 
    padding-bottom: 0;
}

.bgwhite {
    background-color: #fff;
}

section {
   width: 70%;
}

aside {
  
}

.pretime {
  font: normal .3em #518b50;
}

.flags1 {
    
     padding: 2em .2em 0 1em;
    width: 5em;
}

.flags2 {
    
      padding: 2em 1em 0 .2em;
     width: 5em;
   
}
.flagspace {
    padding: .5em 1.5em;
    
}
.formsmall {
    width:100%;
    font-size:1em;
}

.small8 {
  font:bold .8em arial;
    background-image: url(../images/greendark.gif);
    padding: 5px;
 
}

.left {
    float:left;
   
}
.gray {
    color:#333;
}
.nav-item {
    padding: 0 .5em
}
.topnav {
    font: normal 1.1em arial black;
   
}

.searchbg {
    background-image: url(../images/navbg.png);
    background-repeat: no-repeat;
      border-radius: 6px; 
    padding: .5rem 1rem;
}


.navbg {
    background-image: url(../images/navbg.png);
    background-repeat: no-repeat;
      border-radius: 6px; 
    margin-top: .6em;
    width:100%;
}





a.topnav {
     color:#457ec1;
}

a.topnav:hover {
     color:#518b50;
}

.blue a {
    
    color:#457ec1;
    font-weight: 400;
    
}

.blue a:hover {
    
    color:#518b50;
   
    
}

.bgwhite {
    padding: 1em;
   background-color: rgb(255,255,255, .4);
}

/* left content */

.galcontent {
    width: 70%;
    
    
}

/* right navigation */

aside {
    padding:1em .3em;   
  width: 30%;
}

aside ul {
  margin-left: 1em;  
padding-left: 1em;
}

aside ul li {
 list-style-image: url(../images/pointer.gif);
    padding:.3em .5em;
    border-bottom: #999 2px solid;
}

aside ul li:hover {
     border-bottom: #000 2px solid;
}

aside ul li a {
font:bold 1.1em arial Narrow;
 color:#333;
    text-decoration: none;
}

aside ul li a:hover {
 text-decoration: none;
color:#000;
}

.rightsidenav {
  
background-color: rgb(255,255,255, .4);

    
}

.picbox1 {
  background-image:url(../images/boxpictures_01.jpg);
    padding: 3em 3.2em 3em 3.2em;
    margin: 0 .4em;
}

.picbox2 {
    background-image:url(../images/boxpictures_03.jpg); 
    padding: 3em 3.2em 3em 3.2em;
    margin: 0 .4em;
}

.picbox3 {
    background-image:url(../images/boxpictures_05.jpg);  
    padding: 3em 3.2em 3em 3.2em;
    margin: 0 .4em;
}

.picbox4 {
    background-image:url(../images/boxpictures_07.jpg);  
    padding: 3em 3.2em 3em 3.2em;
    margin: 0 0 0 .4em;
}

.plink {
    margin: 0 auto;
    width: 8em;
    text-align: center;
    
}

a.gcolor {
   font:bold 1em arial black;
    color:#000;
    
}

 a.gcolor:hover {
   font:bold 1em arial black;
    color: #518b50;
    
}

h4 a {
    font: bold .7em arial;
    color:#000;
    
}

.studentbox {
    font: normal .6em arial;
    color:#000; 
    padding: 3em 0 0 3em;
    width:25%;
}

.educatebox {
      font: normal .6em arial;
    color:#000; 
    padding: 3em 3em 0 3em;
      width:25%;
}

.docbox {
   font: normal .6em arial;
    color:#000; 
    padding: 3em 3em 0 3em;
      width:25%;
}

.khebbox {
      font: normal .6em arial;
    color:#000; 
    padding: 3em 0 0 3em;
      width:25%;
}

.widecontent {
    width:90em;
}

a.nlink {
     font: normal 1.6em arial;
    color:#000;
}

a.mlink {
    font: bold 1.3em arial;
    color:#000;
}

.media-body p {
    padding: 0;
    line-height: .3em;
}



/* footer (landscape tablets, 768px and up) */
h4 {
    padding:.5em 0;
    text-align: left;
    
}

h6 {
    padding:.5em 0;
    text-align: center;
    
}

.imgspace {
    padding-top: 1em;
}

.ghead {
    display: block;
    background-color: #518b50;
    margin: 0 auto;
    
}

a.glink {
    color:#fff;
    padding: 0 2em;
    font:normal .8em arial;
}

.gbox {
    padding: 1em .3em;
}



footer {
    background-image: url(../images/footerbuilding.jpg); 
      background-position: top;
    background-repeat: no-repeat;
    padding: 7em 0 6em 0;
}

.footerbg {
      background-image: url(../images/greendark.gif);
     background-position: top; 
     width: 100%;
    padding: 1em 0 2em 0;
    color:#fff;
}




/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width:768px) {
    
.small {
        width:100%;
        height: auto;
        flex-basis:0;
    } 
    
    .break {
        max-width: 20%;
    }
    
   .righttext {
     margin-left:30px;  
    }
    

         .sacmlogo {
        width: 40%;
    }
    
    .flags {
         width: 20%; 
        padding: .5em
            
    }
    
    a.topnav {
    font-size: .9em;
}
    
     .picbox1 {
          background-repeat: no-repeat;
    background-position: center;
         
        padding: 3em 4em 3em 4em;
         
         margin:0 0 .5em 0;
   
    }
    
     .picbox2 {
    background-repeat: no-repeat;
    background-position: center;
          padding: 3em 4em 3em 4em;
         margin:0 0 .5em 0;
   
    }
    
    .picbox3 {
        background-repeat: no-repeat;
    background-position: center;
         padding: 3em 4em 3em 4em;
        margin:0 0 .5em 0;
   
    }
    
    .picbox4 {
    background-repeat: no-repeat;
    background-position: center;

    width: 100%;
        margin: 0;
    }
    
      .galcontent {
        width:100%;
          padding: 0;
    }
    
    .container {
        padding: 0;
    }
    
   aside {
    padding: 1em .3em;
    width: 100%;
} 
    
}



/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    
  
      .flags {
         width: 12%; 
        padding: .2em
            
    }
    
   .navwide {
      width: 100%;
    
    }
    
    .widecontent {
        width: 60%;
}
    
    
        .picbox1 {
          background-repeat: no-repeat;
    background-position: center;
         
        padding: 3em 4em 3em 4em;
         
         margin:0 0 .5em 0;
   
    }
    
     .picbox2 {
    background-repeat: no-repeat;
    background-position: center;
          padding: 3em 4em 3em 4em;
         margin:0 0 .5em 0;
   
    }
    
    .picbox3 {
        background-repeat: no-repeat;
    background-position: center;
         padding: 3em 4em 3em 4em;
        margin:0 0 .5em 0;
   
    }
    
    .picbox4 {
    background-repeat: no-repeat;
    background-position: center;

    width: auto;
        margin: 0;
        padding: 3em 5em 5em 5em;
    }
    
    .studentbox {
    font: normal .6em arial;
    color:#000; 
    padding: 3em 0 0 3em;
    width:100%;
    float: left;
}

.educatebox {
      font: normal .6em arial;
    color:#000; 
    padding: 3em 3em 0 3em;
    width:100%;
    float: left;
}

.docbox {
   font: normal .6em arial;
    color:#000; 
    padding: 3em 3em 0 3em;
    width:100%;
    float: left;
}

.khebbox {
      font: normal .6em arial;
    color:#000; 
    padding: 3em 0 0 3em;
    width:100%;
    float: left;
}

    
    .navbar-nav {
        display: flex;
        flex-direction: column !important;
    }
    
    .galcontent {
        max-width:100%;
    }
    
aside ul li a {
font:bold .8em arial Narrow;
line-height: 0;
 color:#333;
    text-decoration: none;
}
    
    .searchright {
        padding-left: 5em;
    }
    
    @media (min-width: 576px)
#nlist {
    flex-direction: column!important;
    
}
    
}