/* ----------------------------------------------------------------*/
/* Grid between 480-767px (mediaqueries)
-----------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
      
/* BASE CONTAINER & GRID WIDTH - 480-767px
----------------------------------------------------*/
#basecontainer {
    clear: both; 
    position: relative; 
    width: 100%; 
    }

.basesectionwidth {
    clear: both; 
    position: relative; 
    width: 100%; 
    min-width: 420px;
    max-width: 748px;
    }

.basegridwidth {
    position: relative;
    width: 100%;
    min-width: 460px;
    max-width: 748px;  
    margin: 0 auto;
    }
    
.contentwidth {
    position: relative;
    width: 98%;
    min-width: 440px;
    max-width: 708px;
    margin: 0 auto;
    z-index: 12;
    }
    
/* HEADER - 480-767px
----------------------------------------------------*/
.header {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%; 
    z-index: 100; 
    height: 70px;
    min-width: 420px; 
    max-width: 748px;
    transform: none;
    text-align: left;
    border-bottom: 1px solid #2754AB;
    -webkit-transform: none;
    -ms-transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    }

.bgheader {
    height: 70px;
}
    
.logo {
    position: absolute; 
    top: 5px; 
    left: 20px; 
    z-index: 101;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    }

.logo img {
    width: 130px;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    }


/* MAIN NAV SHOW/HIDE - 480-767px
----------------------------------------------------*/
.navd, .utilitynav, .toolbar {
    display: none !important;
    }

header, .navr {
    display: block;
    }

/* POP UP - 480-767px
-------------------------------------------------------*/
#boxes .window {
    left:0;
    top: 50px;
    }
 
#boxes #dialog {
    width:80%; 
    height:auto;
    }

#boxes .window img {
    width:100%; 
    height:auto;
}

/* RESPONSIVE BUTTON - 480-767px
-------------------------------------------------------*/  
.menu-btn{
    top: 10px;
    right: 10px;
	width: 50px;
	height: 50px;
    }

.menu-btn:before{
    top: 0;
    right: 0;
    line-height: 50px;
    font-size: 20px;
    height: 50px;
    width: 50px;
    }

.donatenow {
    top: 25px;
    right: 60px;
    }

/* RESPONSIVE MENU TITLE - 480-767px
----------------------------------------------------------------*/
.menu-title {
    height: 50px;
    border-bottom: 1px solid #FFF;
    }

.menu-title .title a {
    display: block;
    padding: 18px 5px 0 10px;
    font-size: 20px;
    }
       
#navsocial {
    float: left;
    margin: 1px 0 5px 0;

}

/* SUB PARENT BANNER - 480-767px
----------------------------------------------------------*/
.subparentbanner{
    position: relative;
    height: 50px;
    }
      
.subparenttitle {
    width: 90%;
    top: 12px;
    padding: 0;
    }

.subparenttitle h1, .subparenttitle .h1title {
    font-size: 25px;
    line-height: 42px;
    padding: 0 0 0 0;
    margin: 0;
    letter-spacing: .01em;
    } 

.subparenttitle h2 {
    font-weight: 200;
    color: #9DDAF1;
    text-transform: uppercase;
    font-size: 25px;
    line-height: 42px;
    padding: 0 0 0 0;
    margin: 0;
    letter-spacing: .01em;
}

.clienttitle {
    display: none;
}

/* SUB PAGE BANNER - 480-767px
----------------------------------------------------------*/
.subpagebanner{
    height: 39px;
    }
    
.subpagetitle {
    padding: 0;
    }

.subpagetitle h2, .subpagetitle .h2title {
    font-size: 16px;
    line-height: 32px;
    padding: 8px 0 0 0;
    margin: 0;
    letter-spacing: .03em;
    } 	
  
/* CONTENT GRID - SUBPAGES - 480-767px
----------------------------------------*/
.contentarea {
    position: relative;
    width: 100%;
    padding: 0;
    float: none;
    padding-left: 0;
    }
    
.contentarea .pagetitle h2, .contentarea .pagetitle h3 {
    font-size: 26px;
    line-height: 26px;
    border-bottom: 2px solid #dfdfdf; 
    margin: 0;
    padding: 2px 0 3px 0;
    }    

.contentblock {
    clear: both;
    padding: 5px 0 0 0;
    width: 90%;
    margin: 0 auto;
    max-width: 748px;
    min-width: 440px;
    min-height: 100px;
    _height: 100px;
    }  
    
.contentgrid {
    position: relative;
    padding: 17px 0 0 0;
    float: none;
    clear: both;
    width: 98%;
    }

.rightsidecontentgrid {
    float: none;
    clear: both;
    padding: 0;
    width: 95%;
    margin: 0 auto;
} 

.full {
    width: 100% !important;
    float: none;
    }

/* CONTENT BLOCK - 480-767px 
----------------------------------------------------*/ 
.StandardCBStyle, .StandardCBStyle .normalPara p, .StandardCBStyle .normalPara, .StandardCBStyle p {font-size: 18px; line-height: 24px; color: #333333; font-weight: 400;} 
    
/* HOMEPAGE - 480-767px 
----------------------------------------------------*/
.level01 .leftcol {
    display: none;
}

.level01 .rightcol {
    position: relative;
    float: none;
    margin: 0 auto;
    width: 100%;
}

.level01 .rightcol .content .eventlist .eventblock {
    width: 100%;
    float: none;
    clear: both;
    padding-bottom: 20px;
    } 

.level01 .rightcol .content .eventlist .eventblock .imagearea img {
    width: 99%;
}

.level01 .viewall {
    width: 98%;
    text-align: right;
}

.level01 .viewall .link {
    position: absolute;
    top: -28px;
    right: -5px;
    width: 160px;
}

.blogblocks .blockentryblock {
    float: left;
    width: 50%;
    border-right: 1px solid #ffffff;
    box-sizing: border-box;
    }     


.blogblocks .blockentryblock .blogtitle a {
    font-size: 16px;
    line-height: 16px;
}

.level02, .blogblocks  {
    min-height: 250px;
    _height: 250px;
}

/* LOCATION GRID - SUBPAGES - 480-767px
----------------------------------------------------*/
.levellocation {
    width: 100%;
    min-height: 330px;
    _height: 330px;
    }
    
.levellocation .locationmap {
    float: none;
    width: 100%;
    min-height: 300px;
    _height: 300px;
    margin-bottom: -4px;   
    }

.levellocation .locationhours {
    position: relative;
    float: none;
    width: 98%;
    margin: 0 auto;
    
    }
       
.locationhours .locationcontent {
    width: 100%;
    }  

.locationhours .locationcontent .pad {
    padding: 14px 8px 0 0;
    }  
    
.locationhours .locationcontent .label {
    display: block;
    font-size: 44px;
    }    

.locationhours .locationcontent .locationcontentgrid {
    width: 100%;
    min-height: 100px;
    _height: 100px;
    padding-top: 8px;
    }

.locationhours .locationcontent .locationcontentgrid .contentcolleft {
    clear: both;
    padding-top: 10px;
    width: 100%;
    float: none;
    }
    
.locationhours .locationcontent .locationcontentgrid .contentcolright {
    clear: both;
    width: 100%;
    float: none;
    }


/* FOOTER - 480-767px
----------------------------------------------------*/
#footer {
    padding: 10px 0 20px 0;
    }
    
.footerleft {
    clear: both;
    float: none;
    width: 100%;
    text-align: center;
    }
    
.footerleft .badges {
    display: block;
    padding-top: 12px;
    }

.footerleft .badges .badgeimage {
    float: none;
    display: inline-block;
    padding-right: 12px;
    }

.footerleft .badges .badgeimage img {
    height: 60px;
    padding: 5px;
    }
    
.footerright {
    padding: 10px 0 0 0;
    clear: both;
    float: none;
    width: 100%;
    text-align: center;
    } 
     
/* HOME GALLERY - 480-767px
----------------------------------------------------*/ 
.gallerycontainer {
    height: 200px;
    }

.slides-navigation {
    top: 40%;
    }
    
.slides-navigation a.next:before, .slides-navigation a.prev:before {
    font-size: 30px;
    }
    
.slides-pagination {
    display: none;
    }


/* HOME CONTENT AREA GRID - 480-767px
----------------------------------------------------*/
.homegid {
    width: 100%;
    }
    
.homegridlevel1bg {
    border-top: 4px solid #E9E9E9;
    display: block;
    padding: 20px 0 20px 0;
    }
    
.mainhomeblock {
    width: 95%;
    margin: 0 auto;
    }
    
.HomeMainCBStyle, .HomeMainCBStyle .normalPara p, .HomeMainCBStyle .normalPara, .HomeMainCBStyle p {
    font-size: 21px !important;
    line-height: 27px !important;
    }
    
/* HOME CONTENT AREA GRID - LEVEL 02 - 480-767px
----------------------------------------------------*/    
.homegridlevel2bg {
    position: relative;
    min-height: 245px;
    _height: 245px;
    width: 100%;
    z-index: 12;
    }
         
.homecontentgridlevel2{
    position: relative;
    width: 100%;
    padding: 5px 0 0 0;
    margin: 0 auto;
    } 
    
.homecontentgridlevel2 .title h1, .homecontentgridlevel2 .rightside .title h3 {
    font-size: 20px;
    line-height: 19px;
    min-height: 27px;
    _height: 27px;
    font-weight: 400;
    padding: 3px 0 10px 0;
    margin: 0;
    }

.homepaddingspacer {
    padding: 10px;
    }
    
.homecontentgridlevel2 .content {
    display: block;
    }
    
.homecontentgridlevel2 .leftside {
    width: 32%;
    float: left;
     min-height: 293px;
     _height: 293px;
    }

.columnspacer {
    float: left;
    padding: 0 5px;
    }

.homecontentgridlevel2 .rightside {
    float: right;
    width: 32%;
    min-height: 293px;
     _height: 293px;
    }

.homecontentgridlevel2 .viewall {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 25px;
    }

.homecontentgridlevel2 .viewall a {
    clear: both;
    font-size: 14px;
    line-height: 25px;
    letter-spacing: .1em;
    padding: 0 0 0 10px;
    text-shadow: -1px -1px 0 #305467;  
    }

/* BLOG LIST - 480-767px
----------------------------------------*/
.bloglist .entrytimage {
    clear: both;
    float: none;
    width: 95%;
    }

.bloglist .entrytimage img {
    width: 100%;
    max-width: 440px;
    border: 1px solid #0F2F53;
    }

.bloglist .entrydetails {
    clear: both;
    float: none;
    width: 95%;
    padding-bottom: 45px;
    }

.blogpostcontentblock .details {
    float: none;
    width: 100%;
    clear: both;
    position: relative;
    min-height: 95px;
    max-height: unset
    }

.blogpostcontentblock .details .location {
    position: relative;
    clear: both;
    width: 100%;
    padding: 20px 0 0 0;
    } 

.blogpostcontentimage {
    float: none;
    width: 100%;
    clear: none;
    max-width: 440px;
    position: relative;
    }
 
.blogpostcontentimage img {
    display: block;
    width: 100%;
    border: 1px solid #0F2F53;
    }

.bloglistnav {
    float: none;
    clear: both;
    margin-top: 25px !important;
}

.blogpostnav {
    float: none;
    clear: both;
    margin-top: 25px !important;
}

.subnavgrid .blognavtitle {
    position: relative;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 200;
    letter-spacing: .05em;
    display: block;
    font-size: 12px;
    line-height: 24px;
    padding: 0 0 0 9px;
    background-color: #0F2F53;
}

.newtitle {
    position: relative;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 200;
    letter-spacing: .05em;
    display: block;
    font-size: 12px;
    line-height: 24px;
    padding: 0 0 0 9px;
    background-color: #0F2F53;
}


/* EVENT LIST- 480-767px
----------------------------------------*/
.eventlistnavgrid, .eventnavgrid {
    margin-top: 0 !important;
}

.eventnavgrid {
    margin-top: 20px !important;
}

.eventlist .title h3 {
    font-size: 26px !important;
    line-height: 23px !important;
}


/* FORM - 480-767px
----------------------------------------*/
#pubcontactform{
    width: 95%;

}

#pubcontactform .rightCol {
    clear: both;
    float:none; 
    width: 100%;
    padding-bottom:10px;
    }

#pubcontactform .leftCol {
    clear: both;
    float:none; 
    width: 100%;
    padding-bottom:10px;
    }

#pubcontactform select, #pubcontactform textarea, #pubcontactform input[type="text"] {
    font-size: 16px; 
    padding: 6px;
    }

#pubcontactform select {
    width: 97%; 
    }

/* DONATION FORM - 480-767px
----------------------------------------*/
.fundlist {
    width: 98%;
    margin: 0 auto;
}

.fundblock {
    float: none;
    width: 100%;
    margin: 0 auto;
}

.gridformleft {
    width: 100%;
    float: none;
    clear: both;
}

.gridformright {
    width: 95%;
    float: none;
    clear: both;
    padding-top: 20px;
    text-align: center;
}

.gridformright .fundtitle {
    text-align: left;
    padding-top: 20px;
}

.gridformright .fundtext {
    text-align: left;

}

.donationform {
    clear: both;
    margin: 0 auto;
    width: 98%;
    padding-top: 20px;
}

.donationform .formstyle {
    width: 100%; 
}

.donationform .formstyle .title {
    width: 96%; 
}

.donationform .formstyle input,
.donationform .formstyle select, textarea {
    font-size: 16px; 
    width: 90%; 
    margin-bottom: 10px; 
    padding: 8px;
}
.donationform .formstyle select {
    width: 93%;

}

.donationform .amount {
    clear: both;
    float: none;
    width: 100%;
}

.donationform .ocurring {
    clear: both;
    float: none;
    padding-left: 0;
    width: 94%;
}

.donationform .expiration {
    clear: both;
    float: none;
    width: 100%;
}

.donationform .securitycode {
    clear: both;
    float: none;
    padding-left: 0;
    width: 90%;
}

.reciept {
    width: 96%;
    margin: 0 auto;
}

.donationreceiptdetails {
    width: 96%;
    text-align: left;
    margin: 0 auto;
}


    
}