body {
font-family: 'Roboto', sans-serif;
font-weight: 400;	
margin: 0;
padding: 0;
font-size:12pt;
line-height: 20pt;
color: #333333;
-webkit-font-smoothing: antialiased !important;
}

a, a:hover{color:#FAB904; outline: 0; text-decoration:none;}
a:hover{color:#d7a005;}


h1, h2, h3, h4, h5{
font-family: 'Roboto', sans-serif;
}
h1 {
color: #333333;
font-family: 'Fjalla One', sans-serif;
font-weight: 400;
font-size: 40pt;
margin: 5px 0 0 0;
padding: 20px 0 20px 0;
letter-spacing: -0.5pt;
text-transform:uppercase;
-webkit-font-smoothing: antialiased !important;
}
h2 {
font-family: 'Playfair Display', serif;
font-weight: 300;
font-size: 24pt;
line-height: 34pt;
letter-spacing: -0.5pt;
color: #4b5e77;
}
h3{
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size:18pt;
line-height:20pt;
letter-spacing: -0.25pt;
color: #333;
-webkit-font-smoothing: antialiased !important;
}
h4 {
color: #333333;
font-family: 'Fjalla One', sans-serif;
font-weight: 400;
font-size: 16pt;
letter-spacing: -0.5pt;
text-transform:uppercase;
-webkit-font-smoothing: antialiased !important;
}

.welcome{
font-family: 'Playfair Display', serif;
font-weight: 300;
font-size: 24pt;
line-height: 28pt;
letter-spacing: -0.5pt;
color: #4b5e77;	
}

.caption{
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 10pt;
line-height: 14pt;
letter-spacing: -0.25pt;
color: #4b5e77;
background: #f3f3f3;
padding: 10px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

.col1{
width:100%;
display:inline-block;
vertical-align:top;
font-family: 'Roboto', sans-serif;	
font-weight: 400;
font-size: 20pt;
line-height: 30pt;
letter-spacing: 1px;
float: right;
margin: 0 0 10px 10px;
}
.col2{
color: #333333;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 14pt;
line-height: 28pt;
padding: 0;
letter-spacing: 0pt;
}
.col3{
width:30%;
text-align: left;
display:inline-block;
vertical-align:top;
font-size:12pt;
line-height:12pt;
text-transform: uppercase;
-webkit-font-smoothing: antialiased !important;
}
.col-one-third{
width:30%;
display:inline-block;
vertical-align:top;
font-family: 'Roboto', sans-serif;	
font-weight: 400;
font-size:12pt;
line-height:22pt;
}
.col-two-third{
width:66%;
margin:5px;
display:inline-block;
vertical-align:top;
}




/* HEADER */
#header{
background: rgba(0, 0, 0, 0.75);	
position:fixed;
z-index:2;
top:0;
height:110px;
width:100%;
min-width:980px;
overflow:hidden;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
-webkit-box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.25);
}
#header a{
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
-ms-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
transition: all 0.25s linear;
}
#header #logo{
cursor: pointer;
width: 250px;
height: 85px;
display: block;
position: absolute;
left: 0px;
padding: 15px 20px 20px 20px;
top: 0px;
z-index: 3;
background: #4b5e77 url('../../art/Masonic-Charities-Logo.png') 20px 15px no-repeat;
background-size: 250px 85px;
}
#header #logo:hover{
background:#3b4a5e url('../../art/Masonic-Charities-Logo.png') 20px 15px no-repeat;
background-size:250px 85px;
}
#header #top-navigation{
position:absolute;
right:20px;
top:15px;
z-index:2;
text-align:right;
color:#b1cfe5;
font-size:11pt;
line-height:15pt;
}
#header #top-navigation ul{
display:inline-block;
list-style:none;
padding:0;
margin:0 0 0 20px;
text-align:right;
}
#header #top-navigation ul li{
display:inline-block;
margin:0px 5px;
}
#header #top-navigation ul li:last-child{
margin-right:0;
border-right: 0px;
padding-right: 0;
}
#header #top-navigation ul li a{
display:block;
color:#FFF;
padding:0px 0px 10px 0px;
}
#header #top-navigation ul li i{
color:#a9cdf0;
}
#header #top-navigation ul li a:hover{
color:#fdae4a;
}
#header li{
display:inline-block;
border-right: 1px solid #666;
padding:0px 8px;
}
#header #navigation{
position:absolute;
width: 650px;
right:20px;
top:45px;
z-index:1;
padding-top:15px;
border-top: 1px dotted #666;
}
#header #navigation ul{
list-style:none;
padding:0;
margin:-9px;
text-align:right;
}
#header #navigation ul li{
display:inline-block;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}

#header #navigation ul li:last-child{
border-right: none;
padding-right: 10px;
}
#header li:nth-last-child(2){
border-right:none;
border-left:1px solid #666;
padding-right:0px;
}

#header li:nth-last-child(3){
border-right:none;
}

#header #navigation ul li a{
font-family: 'Fjalla One', sans-serif;
color: #FFF;
font-size: 12pt;
font-weight: 400;
letter-spacing: -0.5pt;
text-transform: uppercase;
display: block;
}
#header #navigation ul li a:hover{
color:#fab904;
border-bottom: 3px solid #fab904;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
#header #navigation li a.donate-button{
font-family: 'Fjalla One', sans-serif;
font-weight: 400;
padding: 3px 12px;
letter-spacing: -0.5pt;
text-shadow: 1px 1px 3px #666;
display: inline-block;
margin: 0px;
text-decoration: none;
background: #FAB904;
color: #ffffff;
-webkit-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: 0 3px 0 0 #906A00;
box-shadow: 0 3px 0 0 #906A00;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#906a00+0,fab904+100 */
background: rgb(144,106,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(144,106,0,1) 0%, rgba(250,185,4,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(144,106,0,1) 0%,rgba(250,185,4,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(144,106,0,1) 0%,rgba(250,185,4,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#906a00', endColorstr='#fab904',GradientType=0 ); /* IE6-9 */
}
#header #navigation li a.donate-button:hover {
color:#ffffff;
background: #FAB904;
border-bottom: none;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#906a00+0,fab904+75 */
background: rgb(144,106,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(144,106,0,1) 0%, rgba(250,185,4,1) 75%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(144,106,0,1) 0%,rgba(250,185,4,1) 75%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(144,106,0,1) 0%,rgba(250,185,4,1) 75%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#906a00', endColorstr='#fab904',GradientType=0 ); /* IE6-9 */
}

@media screen and (min-width: 1200px) {
       #header #navigation{
               width:875px;
       }
       #header #navigation ul li a{
               font-size:16pt;
               padding:0px 2px;
       }
}
@media screen and (min-width: 1500px) {
       #header #navigation{
               width:1150px;
       }
       #header #navigation ul li a{
               font-size:20pt;
               padding:10px 8px;
       }
}



/* HEADER TINY */
#header.tiny{
height:70px;
-webkit-box-shadow: 0 0 5px 2px rgba(0,0,0,0.5);
box-shadow: 0 0 5px 2px rgba(0,0,0,0.5);
}
#header.tiny #logo{
height:70px;
width:70px;
padding:0;
margin:0;
background:#4b5e77 url('../../art/MasonicAZ-Icon.png') 5px 5px no-repeat;
background-size:60px 60px;
}
#header.tiny #logo:hover{
background:#3b4a5e url('../../art/MasonicAZ-Icon.png') 5px 5px no-repeat;
background-size:60px 60px;
}
#header.tiny #top-navigation{
position:absolute;
top:-10000px;
}
#header.tiny #navigation{
top:9px;
border-top: none;
}
#header.tiny #navigation ul li a{
padding-bottom:5px;
list-style:none;
margin:-5px;
text-align:right;
}
#header.tiny.nav-up{
top:-200px;
}
#header.tiny.nav-down{
top:0;
}
#header-image{
height:250px;
}




/* SLIDESHOW */
#slideshow{
width:100%;
height:100%;
min-height:400px;
z-index:1;
}
#slideshow #slideshow-bottom-shadow{
width:100%;
height:500px;
background:url('../../art/bottom-gradient.png') bottom center repeat-x;
background-size:100px 500px;
position:absolute;
bottom:0;
z-index:2;
}
#slideshow #slideshow-top-shadow{
width:100%;
height:300px;
background:url('../../art/top-gradient.png') top center repeat-x;
position:absolute;
top:0;
z-index:1;
}
#slideshow #slideshow-nav{
width:100%;
position:absolute;
top:50%;
font-size:40pt;
line-height:42pt;
z-index:10;
}
#slideshow #slideshow-nav #prev{
color:rgba(255,255,255,0.5);
cursor:pointer;
position:absolute;
left:10px;
}
#slideshow #slideshow-nav #next{
color:rgba(255,255,255,0.5);
cursor:pointer;
position:absolute;
right:10px;
}
#slideshow #slideshow-nav #prev:hover, #slideshow #slideshow-nav #next:hover {
color:rgba(255,255,255,0.7);
}




/* MAIN CONTENT */
#main-content{
padding:20px 0px;
}
#main-content .body{
font-family: 'Roboto', sans-serif;
font-weight: 400; 
margin: 0;
padding: 0;
font-size: 14pt;
line-height:24pt;
color: #333333;
-webkit-font-smoothing: antialiased !important;
}




/* MISSION PANEL */
#mission-panel{
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 14pt;
line-height: 24pt;
text-align: center;
color: #fff;
padding: 0;
-webkit-font-smoothing: antialiased !important;
}
#mission-panel .container{
padding: 40px 0px;
}
#mission-panel .welcome{
font-family: 'Playfair Display', serif;
font-weight: 300;
font-style: italic;
font-size: 22pt;
line-height: 32pt;
letter-spacing: -0.5pt;
color: #ffffff;	
text-align: center;
}
#mission-panel i{
color:#ffffff;
}
#mission-panel h1{
color: #fff;
text-align: center;
font-family: 'Fjalla One', sans-serif;
font-weight: 400;
font-size: 40pt;
margin: 5px 0 0 0;
padding: 20px 0 20px 0;
letter-spacing: -0.5pt;
text-transform:uppercase;
-webkit-font-smoothing: antialiased !important;
}
#mission-panel ul li{
border-right:1px solid #CCC;
padding-bottom:5px;
}
#mission-panel a{
color:#24419b;
}
#mission-panel a:hover{
color:#24419b;
}




/* DONATIONS PANEL */
#donations-panel{
background: #fab904;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 14pt;
line-height: 18pt;
text-align: left;
color: #333;
padding: 0;
-webkit-font-smoothing: antialiased !important;
}
#donations-panel .container{
padding: 40px 0px;
}
#donations-panel hr{
background-color:#333;
color:#333;
height:1px;
border:0px;
}
#donations-panel h1 {
color: #333;
font-family: 'Fjalla One', sans-serif;
font-weight: 400;
font-size: 40pt;
margin: 5px 0 0 0;
padding: 20px 0 20px 0;
letter-spacing: -0.5pt;
text-transform:uppercase;
-webkit-font-smoothing: antialiased !important;
}
#donations-panel .welcome{
font-family: 'Playfair Display', serif;
font-weight: 300;
font-size: 24pt;
line-height: 28pt;
letter-spacing: -0.5pt;
color: #333;
}




/* FOOTER */
#footer{
background: #000000;
padding: 0 0 20px 0;
font-size: 10pt;
line-height: 12pt;
color: #fff;
}
#footer a{
color:#fff;
}
#footer a:hover{
color:#fab904;
}
#footer #footer-navigation{
font-family: 'Fjalla One', sans-serif;
text-align: center;
font-size: 14pt;
line-height: 14pt; 
font-weight: 400;
padding: 40px 0px 20px 0px;
margin-bottom: 10px;
border-bottom: 1px dotted #666;
letter-spacing: -0.5pt;
text-transform: uppercase;
-webkit-font-smoothing: antialiased !important;
}
#footer #footer-navigation ul{
list-style:none;
padding:0;
margin:0;
text-align:center;
}
#footer #footer-navigation ul li{
display:inline-block;
border-right:1px solid #666;
}
#footer #footer-navigation ul li a{
padding:0px 10px;
display:block;
}
#footer #footer-navigation ul li:last-child{
border-right:none;
}
#footer .col3{
width:30%;
text-align: left;
display:inline-block;
vertical-align:top;
font-size:10pt;
line-height:14pt;
-webkit-font-smoothing: antialiased !important;
}




.big-button {
font-family: 'Fjalla One', sans-serif;
font-weight: 400;
font-size: 14pt;
padding:4px 10px;
letter-spacing: -0.5pt;
display: inline-block;
margin:0px;
text-decoration:none;
background: #4e627b;
color:#ffffff;
-webkit-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: 0 3px 0 0 #3f4e62;
box-shadow: 0 3px 0 0 #3f4e62;
-webkit-font-smoothing: antialiased !important;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4e627b+0,667f9f+100 */
background: rgb(78,98,123); /* Old browsers */
background: -moz-linear-gradient(top, rgba(78,98,123,1) 0%, rgba(102,127,159,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(78,98,123,1) 0%,rgba(102,127,159,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(78,98,123,1) 0%,rgba(102,127,159,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e627b', endColorstr='#667f9f',GradientType=0 ); /* IE6-9 */
}
.big-button:hover {
color:#fff;
background: #4e627b;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#667f9f+0,4e627b+100 */
background: rgb(102,127,159); /* Old browsers */
background: -moz-linear-gradient(top, rgba(102,127,159,1) 0%, rgba(78,98,123,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(102,127,159,1) 0%,rgba(78,98,123,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(102,127,159,1) 0%,rgba(78,98,123,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#667f9f', endColorstr='#4e627b',GradientType=0 ); /* IE6-9 */
}
.big-button:active {
position:relative;
top:1px;
-webkit-box-shadow: 0 3px 0 0 #3f4e62;
box-shadow: 0 3px 0 0 #3f4e62;
}



/* ENTRY SIDE PANEL */
#entry-side-panel{
text-align: left;
color: #fff;
font-family: 'Fjalla One', sans-serif;
font-weight: 700;
font-size: 18pt;
line-height: 18pt;
padding: 0;
margin:0 0 0 0;
letter-spacing: 0pt;
cursor: pointer;
-webkit-font-smoothing: antialiased !important;
}
#entry-side-panel .entry-side-item{
padding: 10px;
margin: 0 0 10px 0;
display: block;
vertical-align: top; 
position: relative;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#entry-side-panel .entry01{
background: url("/art/donate_sidepic.jpg") no-repeat;
background-size: 100%;
background-position: 0px 0px; 
}
#entry-side-panel .entry01:hover{
background-size: 110%;
background-position: -5px -5px; 
}
#entry-side-panel .entry02{
background: url("/art/grant-application_sidepic.jpg") no-repeat;
background-size: 100%;
background-position: 0px 0px; 
}
#entry-side-panel .entry02:hover{
background-size: 110%;
background-position: -5px -5px; 
}
#entry-side-panel .entry-side-content{
position: relative;
bottom: 0px;
font-family: 'Roboto', sans-serif;
font-weight: 700;
font-size: 11pt;
line-height: 13pt;
letter-spacing: 0pt;
text-shadow: 1px 1px 3px #666;
}
#entry-side-panel h4{
color: #FFF;
font-family: 'Fjalla One', sans-serif;
font-weight: 400;
font-size: 30pt;
line-height: 30pt;
letter-spacing: -0.5pt;
text-shadow: 1px 1px 3px #666;
}
#entry-side-panel ul li{
border-right:1px solid #CCC;
padding-bottom:5px;
}