﻿/* ----------------------------------------------------------------*/
/* Grid between 768-1003px (mediaqueries)
-----------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 1003px) {
   
/* BASE CONTAINER & GRID WIDTH - 768-1003px
----------------------------------------------------*/
#basecontainer {
    clear: both; 
    position: relative; 
    width: 100%; 
    }

.basesectionwidth {
    clear: both; 
    position: relative; 
    width: 100%; 
    min-width: 768px;
    max-width: 1003px;
    }

.basegridwidth {
    position: relative;
    width: 100%;
    min-width: 728px; 
    max-width: 983px;  
    margin: 0 auto;
    }
    
.contentwidth {
    position: relative;
    width: 95%;
    min-width: 708px;
    max-width: 983px;
    margin: 0 auto;
    z-index: 12;
    }
    
/* HEADER - 768-1003px
----------------------------------------------------*/
.header {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%; 
    z-index: 100; 
    height: 90px;
    min-width: 768px; 
    max-width: 1003px;
    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: 90px;
}
    
.logo {
    position: absolute; 
    top: 10px; 
    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: 166px;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    }


/* MAIN NAV SHOW/HIDE - 768-1003px
----------------------------------------------------*/
.navd, .utilitynav, .toolbar {
    display: none !important;
    }

header, .navr {
    display: block;
    }

/* RESPONSIVE BUTTON - 768-1003px
-------------------------------------------------------*/  
.menu-btn{
    top: 22px;
    right: 20px;
	width: 50px;
	height: 50px;
    }

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

.donatenow {
    top: 37px;
    right: 70px;
    }
    
/* RESPONSIVE MENU TITLE - 768-1003px
----------------------------------------------------------------*/
.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 - 1004px +
----------------------------------------------------------*/
.subparentbanner{
    position: relative;
    height: 100px;
    }
      
.subparenttitle {
    width: 90%;
    top: 54px;
    padding: 0;
    }

.subparenttitle h1, .subparenttitle .h1title {
    font-size: 49px;
    line-height: 42px;
    padding: 0 0 0 0;
    margin: 0;
    letter-spacing: .01em;
    } 

/* SUB PAGE BANNER - 1004px +
----------------------------------------------------------*/
.subpagebanner{
    height: 59px;
    }
    
.subpagetitle {
    padding: 0;
    }

.subpagetitle h2, .subpagetitle .h2title {
    font-size: 32px;
    line-height: 32px;
    padding: 20px 0 0 0;
    margin: 0;
    letter-spacing: .02em;
    } 	   
  
/* CONTENT GRID - SUBPAGES - 768-1003px 
----------------------------------------*/
.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: 100%;
    max-width: 900px;
    min-width: 720px;
    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: 98%;
}  

.full {
    width: 100% !important;
    float: none;
    }
  
    
/* HOMEPAGE - 768-1003px 
----------------------------------------------------*/
.level01 .leftcol {
    display: none;
}

.level01 .rightcol {
    position: relative;
    float: none;
    margin: 0 auto;
    width: 100%;
}

.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 .blogtitle a {
    font-size: 16px;
    line-height: 16px;
}

.level02, .blogblocks  {
    min-height: 250px;
    _height: 250px;
}

/* LOCATION GRID - SUBPAGES - 768-1003px 
----------------------------------------------------*/
.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 {
    width: 33%;
    float: left;
    }
    
.locationhours .locationcontent .locationcontentgrid .contentcolright {
    width: 33%;
    min-height: 100px;
    _height: 100px;
    float: right;
    }


/* FOOTER - 768-1003px
----------------------------------------------------*/
#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: 50px;
    }
    
.footerright {
    padding: 10px 0 0 0;
    clear: both;
    float: none;
    width: 100%;
    text-align: center;
    } 
     
/* HOME GALLERY - 768-1003px
----------------------------------------------------*/ 
.gallerycontainer {
    width: 100%;
    min-width: 768px;
    height: 275px;
    }

.slides-navigation {
    top: 41%;
    }
    
.slides-navigation a.next:before, .slides-navigation a.prev:before {
    font-size: 60px;
    }

/* HOME CONTENT AREA GRID - 768-1003px
----------------------------------------------------*/
.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 - 768-1003px
----------------------------------------------------*/    
.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 - 768-1003px
----------------------------------------*/
.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 - 768-1003px
----------------------------------------*/
.eventlistnavgrid, .eventnavgrid {
    margin-top: 0 !important;
}

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

/* FORM - 768-1003px
----------------------------------------*/
#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 - 768-1003px
----------------------------------------*/
.fundblock {
    float: left;
    width: 50%;
}

.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 .formstyle {
    width: 100%; 
}

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

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

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

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


/* ---------------------------------------- */
} 