* {box-sizing:border-box;
}


.bluebar {background-color:#000000 ;
grid-row: 1/2 ;
grid-column: 1/9;
}

.greybar {background-color: #000;
    grid-row: 2/3 ;
    grid-column: 1/9;

}




body {
    background-color: #FFFFFF ;
    color: #666666 ;
    background-attachment: fixed ;
    margin: 0px;
}
header {
    grid-row: 1/2;
    grid-column: 2/8;
    background-color: #000 ;
    color: #FCF8E1;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif }

header a { text-decoration: none;
color:#FCF8E1
}

.current {
    background-color: #C93221;
}

header h1 {
    line-height: 140% ;
    padding: .5rem;
    background-origin: content-box;
    background-position: right ;
    background-repeat: no-repeat;
    margin:0  ; 
    padding-left: 1em;
    text-decoration: underline;
}

nav 
{background-color: #000 ;
top: 0 ;
font-weight: bold;
grid-row: 2/3 ;
grid-column: 2/8 ;
position:relative
}

nav ul {
margin: 0px;
padding: 0px;
display:flex ;
flex-flow: row nowrap;
list-style-type: none;
}

nav ul li {
width: 100%;

}

nav a {text-decoration: none;
color: #FCF8E1 ;
padding: 1rem 0rem ;
display:block ;
text-align: center;
transition: background-color .5s ;
transition-timing-function: ease-out;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

nav a:hover {
    background-color: #C93221

}

.ming:hover { background-color: #ffffff;
    transition: background-color .1s ;
    transition-timing-function: ease-out; 
    text-decoration:none
}

.ming {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-align: center;
    background: #4976CE;
text-decoration: bold;
font-size: 15px;
}

main { 
    padding-left: 2rem;
    padding-right:  2rem;
    grid-row: 4/5 ;
    grid-column: 2/8 ;
    background: #ffffff
}

.junohero {
    background-image: url(img/juno.jpg);
    height: 500px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    grid-row: 3/4 ;
    grid-column: 1/9
}


h2 {
    color: #000 ;
    font-family: georgia;
    
    text-align: center;
}

h3 {
    color: #000;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


footer { font-size: .7rem ;
font-style: italic;
text-align: center;
padding: 1rem;
grid-row: 5/6 ;
    grid-column: 2/8

}


.twit {
    background-image: url(img/twi.png);
    height: 200px;
    width: 200px;
    background-size: cover;
    background-position: center;
    grid-row: 3/4 ;
    grid-column: 1/9
}

.saw {
    background-image: url(img/Sawtooth_Wave.jpg);
    height: 300px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    grid-row: 3/4 ;
    grid-column: 1/9
}

.cave {
    background-image: url(img/cave.jpg);
    height: 300px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    grid-row: 3/4 ;
    grid-column: 1/9
}

.arp {
    background-image: url(img/arp.jpg);
    height: 500px;
    background-repeat: no-repeat;
    background-position: center;
    grid-row: 3/4 ;
    grid-column: 1/9

}

.pcont {
    background-image: url(img/ocsw.jpg);
    height: 500px;
    background-repeat: no-repeat;
    background-position: center;
    grid-row: 3/4 ;
    grid-column: 1/9

}

.c4 {
    background-image: url(img/ch4.jpg);
    height: 500px;
    background-repeat: no-repeat;
    background-position: center;
    grid-row: 3/4 ;
    grid-column: 1/9

}

.junon {
    background-image: url(img/numj.jpg);
    height: 500px;
    width: auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    grid-row: 3/4 ;
    grid-column: 1/9
}


.one { background-image: url(img/1.jpg);
    height: 500px;
    background-repeat: no-repeat;
    background-position: center;
    grid-row: 3/4 ;
    grid-column: 1/9
}
.two { background-image: url(img/2.jpg);
    height: 500px;
    width: auto;
    background-repeat: no-repeat;
    background-position: center;
    grid-row: 3/4 ;
    grid-column: 1/9}
.three { background-image: url(img/3.jpg);
    height: 500px;
    width: auto;
    background-repeat: no-repeat;
    background-position: center;
    grid-row: 3/4 ;
    grid-column: 1/9}
.four { background-image: url(img/4.jpg);
    height: 500px;
    width: auto;
    background-repeat: no-repeat;
    background-position: center;
    grid-row: 3/4 ;
    grid-column: 1/9}
.five { background-image: url(img/5.jpg);
    height: 500px;
    width: auto;
    background-repeat: no-repeat;
    background-position: center;
    grid-row: 3/4 ;
    grid-column: 1/9}
.six { background-image: url(img/6.jpg);
    height: 500px;
    width: auto;
    background-repeat: no-repeat;
    background-position: center;
    grid-row: 3/4 ;
    grid-column: 1/9}
.seven { background-image: url(img/7.jpg);
    height: 500px;
    width: auto;
    background-repeat: no-repeat;
    background-position: center;
    grid-row: 3/4 ;
    grid-column: 1/9}
.eight { background-image: url(img/8.jpg);
    height: 500px;
    width: auto;
    background-repeat: no-repeat;
    background-position: center;
    grid-row: 3/4 ;
    grid-column: 1/9}
.nine { background-image: url(img/9.jpg);
    height: 500px;
    width: auto;
    background-repeat: no-repeat;
    background-position: center;
    grid-row: 3/4 ;
    grid-column: 1/9}
.ten { background-image: url(img/10.jpg);
    height: 500px;
    width: auto;
    background-repeat: no-repeat;
    background-position: center;
    grid-row: 3/4 ;
    grid-column: 1/9}


    footer{
        background-color: #000;
    }

#wrapper { 
display:grid ;
grid-auto-rows: minmax(0px, auto) ;
grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr) ;

}



@media only screen and (max-width: 1100px)  {
    
.wrapper {
grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 150px)) minmax(0px, 1fr) ;
}
}


@media only screen and (max-width: 900px)  {
    

    nav {
    grid-row: 2/3 ;
    position: static ;
    }
nav ul {
    flex-flow: column nowrap ;

}

.junohero {
    grid-row: 3/3 ;
    height: auto;
}


.junon {
    height: 200px;
}



    }
    


 @media only screen and (max-width: 600px) {

header h1 {
    text-align: center
}
 


nav { 
    grid-row: 2/3;
    grid-column: 1/9;


}
.junohero {
   display: none;
}



 }