body {
background-color: #c1c1c1;
background-image:url(../img/stripe-01.png);

}
html,body, #container, #wrapper, #main {
    font-family: "Arial",sans-serif;
    min-height:100%;
    
    
}
html,body,img{
    margin:0;
    padding:0;
}

a, a:visited{
color: #a82424;
}
a:hover {
opacity: .5;
}

ul, li, #main li{
text-indent: none;
}

wrapper p {
   line-height: 1.5em; 
}

.list-style1{list-style: decimal;}
.list-style2{list-style:disc;}
.list-style0{list-style:none;}


/***************************
******LAYOUT BLOCKS********/

#col1, #col2, #col3{
    visibility: hidden;
    display:none;
   
}

#top-of-page {
padding:0 0 2em 0;
}
#top-of-page h1 {
border-bottom: 1px;
border-bottom-style:dotted;
border-bottom-color:inherit;
margin:.25em 0;
font-family: serif;
}

#contact h2, #focus h2, #co-directors h2, #board-members h2, #info h2{
border-bottom: 1px;
border-bottom-style:dotted;
border-bottom-color:inherit;
}

#wrapper {
    
	min-height:100%;
	position:relative;
    
}

#container{
    background-color: rgba(255, 255, 255, 0.54);
    max-width: 900px;
    margin: 0 auto;
    min-height:100%;/* make sure it is at least as tall as the viewport */
    position:relative
}
.main{
    clear:both;
    margin-left: auto;
    margin-right:auto;
    margin-top: 1em;
    margin-bottom: 1em;
    max-width: 50em;
    padding: 2em 1em 2em 1em;
    box-shadow: 5px 0px 7px #888888;
    border-left: 1px solid rgba(136, 136, 136, 0.19);
    background-color:rgb(255, 255, 255);
    
}

.main ul{
    padding-left: 3em;
}
.main h4{
    padding-left: 1em;
}
.main p {
padding bottom: .25em;
}
.main h2 {
    font-family:serif;
}
.Rlist ul,li {
padding-bottom:.25em;

}
#footer{
    
    color: #8b8b8b;
    text-align:center;
    padding-bottom: 10em;
    padding-left: 1em;
    font-size: x-small;
    margin-left: auto;
    margin-right: auto;
    
}


.ham{
float:left;
}

.nav-wide {
    display:none;
    visibility: hidden;
}

.menu-bar {
    height: 1.75em;
    padding: .5em;
    display:block;
    background-color:  #999;
    color: #fff;
   
}
.menu-bar a {
text-decoration: none;
color: #fff;
font-weight: bolder;
}

.contact{
float:right;
padding-top: .125em;
}

  

.banner{
    visibility: hidden;
    display:none;
}
.icons{
    
    padding:  1% 2.5%;
    margin-left: auto;
    margin-right: auto;
    display:block;
    width:95%;
}
.png{
    width:100%;
    margin:0;
    padding:0;
    
}

 .nh ,  .na, .nr, .ni{
height:20px;
 width:20px;
   
}
.nh{
content: url(../img/nav-home.svg);
}
.na{
content: url(../img/nav-about.svg);
}
.nr{
content: url(../img/nav-resources.svg);
}
.ni{
content: url(../img/nav-interview.svg);
}

.video iframe{
display: block;
text-align: center;
width: 100%;

}
.top {
background-color: #f5f5f5;
}
.rings {

width: 100%;
     max-width: 442px;
}

/***************************
******MEDIA QUERIES********/

@media only screen and (min-width: 480px) {
    
    body{
    font-size: 12px;
    } 
.video iframe{
display: inline;
float: left;
    padding: 1em;
    width: 320px;

}

#columns{
    background-color: rgba(134, 97, 66, 0.16);
    box-shadow: 5px 0px 7px #888888;
    border-left: 1px solid rgba(136, 136, 136, 0.19);
    padding: 1em;
    height:115px;
    text-align: center;
   
}    
    
    #col1, #col2, #col3{
    visibility: visible;
    display:inline;    
    float:left;
    width:30%;
    padding:1.66%;
}
    
  

    .banner{
        padding: 0;
        visibility: visible;
        display:block;
        margin:0;
        width:100%;
    }
    .icons{
        visibility: hidden;
        display: none;
        margin:0;
        padding:0;
        
    }
}


@media only screen and (min-width: 768px) {

.menu-bar {
    display:none;
    visibility: hidden;
}
.nav-wide {
    display: block;
    visibility:visible;
    padding: .8em 0;


    }
    .nav-wide a {

border-right: 1px solid #b2b2b2;
text-decoration: none;
color: #000;
font-weight: bolder;
padding-right: .75em;
padding-left: .75em;

}
    .nav-wide a:last-child {
    border-right: none;
text-decoration: none;
color: #000;
font-weight: bolder;
padding-right: .75em;
padding-left: .75em;
    }
    
    .nav-wide span {
    vertical-align: -3.75px;  
    }
   
.nav-wide a:hover, .nav-wide a:focus {
text-decoration: underline;
}    
    
    
    
    #columns{
    margin-left: auto;
    margin-right:auto;
    display:block;
    max-width: 750px;
    height: 120px;
    }
   


}

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


    .banner{
    margin-left: auto;
    margin-right: auto;
    display:block;    
    
    }
}