@charset "utf-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Cabin);
html, body
 {
	height: 101%;
	margin: 0%;
	padding: 0%;
	border: 0%;
	outline: 0%;
	font-size: 1em;
	vertical-align: baseline;
	background-color:#fff;
	color: #000;
	font-family: 'Cabin', sans-serif;
	max-width:auto;
}

h1 {
	margin-top: 20px;
	margin-bottom: 20px;
}

#main {
	max-width:900px;
	width:100%;
	-moz-box-shadow:    -1px 10px 10px 10px #aaa;
	-webkit-box-shadow: -1px 10px 10px 10px #aaa;
	box-shadow:         -1px -10px 10px 10px #aaa;
	margin: 0 auto;
	display:inline-block;
}

.wrap {
	position:relative;
	margin:0 auto;
	width:100%;
	background-color: #032b68;
	height: 100%;
	max-height:40px;
	}
	
	
	
#wrap-text {
	position:fixed;
	color:#fff;
	font-size:0.9em;
	background-color: #032b68;
	max-height:35px;
	width:100%;
	max-width:900px;
	z-index:1000;
	padding-top:0.5%;
	padding-bottom:0.5%;
	
}
#wrap-text a {
	color:#fff;
	font-weight:100;
}

img {
	border: 0px;
	
}
a {
	color: #3178D0;
	text-decoration:none;
		font-weight:bold;

}

a:hover {
	color: #333;
	text-decoration:underline;
}



#social-top {
	float:right;
	padding-right:2%;

	
}

#top-contact {
	float:left;
	padding-top:0%;
	padding-left:2%;

}

@media screen and (max-width: 667px) {
#RBI {
display:none;	
}
}

#logo {
float:left;
padding-left:2.5%;
padding-bottom:0.5%;
	
}
@media screen and (max-width: 801px) {
#logo {
	display:none;
	
	
}



}

@media screen and (max-width: 801px) {
		#wrap-text {
		max-height:100px;	
			
		}
		#top-contact {
			float:none;
			text-align:center;
			
		}
	#social-top {
	float:none;	
    text-align:center;
	padding-top:2%;
	}	
		
	}

#menu {
	float:right;
	margin-top:3%;
	padding-right:1%;
}


@media screen and (max-width: 801px) {
#menu {
	float:left;
	text-align:center;
	margin-top:8%;

}}

@media screen and (max-width: 736px) {
#menu {
	margin-top:8%;

}}


@media screen and (max-width: 668px) {
#menu {
	margin-top:5%;}
	
#address {
			display:none;
		}	
}


@media screen and (max-width: 568px) {
#menu {
	margin-top:10%;
}



}
@media screen and (max-width: 520px) {
#menu {
	padding-top:5%;
}}

@media screen and (max-width: 480px) {
#menu {
	margin-top:5%;
}}

@media screen and (max-width: 321px) {
#menu {
	margin-top:5%;
}}


#header {
	padding-top:5.5%;
	
}

h2 {
	font-size: 2.3em;
	text-align:center;
	line-height:20%;
}

#facebook-feed {
	float:left;
		padding-right:1%;
		padding-left:5%;
		width:100%;
	max-width:400px;

}

#twitter-feed {
	float:right;
	width:100%;
	padding-right:5%;
	max-width:500px;


}
@media screen and (max-width: 667px) {
	#facebook-feed {
		float:none;
		display:inline-block;
		text-align:center;
		
	}
	
#twitter-feed {
		float:none;
		display:inline-block;
		text-align:center;	
	margin-left:25%;
}
	
}

@media screen and (max-width: 568px) {
#twitter-feed {
margin-left:20%;

}
}



@media screen and (max-width: 480px) {
#twitter-feed {
margin-left:12%;

}
}

@media screen and (max-width: 415px) {
#twitter-feed {
margin-left:11%;
max-width:350px;
}
}


@media screen and (max-width: 375px) {
#twitter-feed, #facebook-feed {
	max-width:300px;
}

#facebook-feed {
	margin-left:5%;
}

}

@media screen and (max-width: 321px) {
#facebook-feed {
margin:0%;

}}

@media screen and (max-width: 321px) {
#twitter-feed {
max-width:280px;
margin-left:8%;
}}


#instagram-feed {
	width:100%;
	max-width:1100px;
	float:left;
	padding-left:2%;
}

#feed-footer {
	width:100%;
	background-color:#cccccc;
	color:#fff;
	float:left;

	text-align:left;
	
}

#blog-feed {
	rss-title:hidden;
	width:100%;
	max-width:500px;
	padding-left:1%;
	color:#fff;
	float:left;
	
}

#blog-feed a {
	color:#fff;
	font-weight:bold;

}

#read-button {
	font-size:0.8em;
	padding: 1%;
	border: 1px solid #fff;
width:80px;
float:right;
text-align:center;
	
}

#bottom {
	text-align:center;
	font-size:0.9em;
	max-width:900px;
	width:100%;
	float:none;
	display:inline-block;
}

@media screen and (max-width: 1024px) {
	#blog-feed {
		width:100%;
		max-width:400px;
	
}

}


@media screen and (max-width: 768px) {
	#blog-feed {
		width:100%;
		max-width:700px;
	
}}


#email-signup {
	
padding: 2%;
border: 2px solid #fff;
font-size:1em;
display:inline-block;
font-weight:100;
text-align:center;
color:#fff;
max-width:400px;
margin-left:10%;
margin-bottom:10%;
}

#email-signup a {
	
	color:#fff;
}


@media screen and (max-width: 768px) {
	#email-signup {
		margin-top:10%;
		margin-left:20%;
		
		
	}}
	
	@media screen and (max-width: 568px) {
	#email-signup {
		margin-top:10%;
		margin-left:15%;
		
		
	}}
	
		@media screen and (max-width: 480px) {
	#email-signup {
		margin-top:10%;
		margin-left:10%;
		
		
	}}
	
		@media screen and (max-width: 415px) {
	#email-signup {
		max-width:300px;
		width:100%;
		
	}}

		@media screen and (max-width: 375px) {
	#email-signup {
		max-width:275px;
		width:100%;
		
	}}
		@media screen and (max-width: 321px) {
	#email-signup {
		max-width:250px;
		width:100%;
		
	}}
ul.box {
position: relative;
z-index: 1; /* prevent shadows falling behind containers with backgrounds */
overflow: hidden;
list-style: none;
margin: 0;
padding: 0; }

ul.box li {
position: relative;
float: left;
width: auto;
height: auto;
padding: 0;
border: 1px solid #efefef;
margin: 0 30px 30px 0;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }

ul.box li:before,
ul.box li:after {
content: '';
z-index: -1;
position: absolute;
left: 10px;
bottom: 10px;
width: 70%;
max-width: 400px; /* avoid rotation causing ugly appearance at large container widths */
max-height: 400px;
height: 55%;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
-ms-transform: skew(-15deg) rotate(-6deg);
-o-transform: skew(-15deg) rotate(-6deg);
transform: skew(-15deg) rotate(-6deg); }

ul.box li:after {
left: auto;
right: 10px;
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
-ms-transform: skew(15deg) rotate(6deg);
-o-transform: skew(15deg) rotate(6deg);
transform: skew(15deg) rotate(6deg); }


#us-contact-info {
 width:45%;
 float:left;
 padding-right:2.5%;
text-align:left;
 
}
#phil-contact-info {
 width:45%;
 float:right;
 padding-right: 2.5%;
 text-align:left;

}



@media only screen
and (max-width:768px) {

   #us-contact-info, #phil-contact-info {
     float:none;
     padding-left:0;
     padding-right:0;
     padding-top:1em;
     width:100%;
   }
}



#footer-left {
 width:20%;
 float:left;
 padding-left:20%;
text-align:left;
 
}
#footer-middle {
 width:20%;
 float:left;
 padding-right: 10%;
 text-align:center;

}
#footer-right {
 width:20%;
 float:right;
 padding-right:9%;
 text-align:left;

}

@media only screen
and (max-width:569px) {

   #footer-right, #footer-middle, #footer-left {
	 float:none;
     padding-left:0;
     padding-right:0;
     padding-top:1em;
     width:100%;
	 text-align:center;
   }
}


