/* GLOBAL STYLES */

html{
    font-family:"century gothic",verdana,sans-serif;
    background-color: #fff;
}

body{
    width: 80%;
    height: auto;
    margin: 0 auto;
    background-color: #fff;
    color: black;
    position: relative;
    -webkit-border-radius: 0px 0px 20px 20px;
    border-radius: 0px 0px 20px 20px;
    border: 2px solid #000;
}

header{
    height: 150px;
    width: auto;
    background-color:#000;
    padding: 0;
    text-align: center;
}

header img{
    width: 100%;
    height: 150px;
}

header a{
    text-decoration: none;
}

header h1{
    margin-top: -2.75em;
    padding: 0;
    letter-spacing: 10px;
    font-family: 'Rock Salt', cursive;
    font-size: 48px;
    color: #f00;
    text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}

nav{
    min-height: 50px;
    height: auto;
    width: auto;
    text-align: center;
    background-color: #d4d4d4;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
}

section{
    height: auto;
    background-color: #fff;
    padding: 0 1em;
}

section.resources{
    width: auto;
}

/* slideshow css start */


/* slideshow css end */

.donate{
    text-align: center;
}

.what p{
    font-size: 50px;
    margin: 0 auto;
    text-decoration: underline;
    color: #e60000;
    text-align: center;
    font-weight: bold;
}

section h1, section h2{
    text-align: center;
}

div.acronym p{
    width: 375px;
    height: auto;
    font-size: 40px;
    margin: 0 auto;
    font-weight: bold;
    color: #8C2626;
}

div.contact{
    width: 320px;
    margin: auto;
}

form div, textarea {
    margin-bottom: 1em;
}

aside{
    height: auto;
    background-color: #fff;
    padding: 0 1em;
}

aside h2{
    text-align: center;
}

.embed-container { 
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.embed-container iframe, .embed-container object, .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-top: 2em;
}

.svcs li{
    font-size: 2em;
}

footer{
    width: auto;
    clear: both;
    padding-top: 2em;
    text-align: center;
}

/* DESKTOP */
@media all and (min-width:1280px) {
    
img.phone{
    display: none;
}
    
.agenda{
    display: none;
}
    
section{
    height: auto;
    min-height: 500px;
    width: 58%;
    background-color: #fff;
    float: left;
    padding: 0 1em;
}
    
section.resources{
    width: auto;
}
    
 aside{
    height: auto;
    min-height: 600px;
    width: 30%;
    background-color: #fff;
    float: right;
    padding: 0 1em;
}
    
div.embed-container{
    min-height: 150px;
}
    
}

/*TABLET*/
@media all and (min-width: 361px) and (max-width: 1279px){
 
img.desktop{
    display: none;    
}
    
.calendar{
    display: none;
}  
  
body{
    width: 100%;
}
    
header h1{
    margin-top: -3.5em;
    padding: 0;
    letter-spacing: 5px;
    font-family: 'Rock Salt', cursive;
    font-size: 36px;
    color: #f00;
    text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}
    
div.embed-container{
    min-height: 150px;
}
    
  
}
    

    
/*PHONE*/
@media all and (max-width: 360px){
    
img.desktop{
    display: none;    
}
    
.calendar{
    display: none;
}
    
body{
    width: 100%;
}
    
header h1{
    margin-top: -4em;
    padding: 0;
    letter-spacing: 5px;
    font-family: 'Rock Salt', cursive;
    font-size: 28px;
    color: #f00;
    text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}

nav{
    min-height: 50px;
    height: auto;
    width: auto;
    text-align: center;
    background-color: #000;
    padding-top: .17em;
}
    
div.embed-container{
    min-height: 150px;
}
    

    
}