/* ******************************************
	Web Fonts
****************************************** */
@import url(http://fonts.googleapis.com/css?family=Amaranth:400,700);

/* ******************************************
	Layout - general
****************************************** */
body { background-color: #eceded; }
h1, h2, nav, li, a {
	font-family: 'Amaranth', sans-serif;
}
p, span, label, legend { font-family: arial; }
h1, h2, h3, h4, h5, h6 {
	font-weight: 100;
}
h1 {
	font-size: 2.126em;
}
h2 {
	font-size: 1.6em;
}
h3 {
	font-size: 1.382em;
}
p {
	font-size: .85em;
	line-height: 1.1;
}
a { color: #f77007; }
a:hover { text-decoration: none; }

div#main {
	margin: 0 5% 2%;
}

/* ******************************************
	Layout - header
****************************************** */
#container-outer {
	background: url("../images/bg_top_sm.gif") repeat-x scroll center top #eceded;
}
#container-inner {
    background: url("../images/bg_top_img_sm.jpg") no-repeat scroll center top rgba(0, 0, 0, 0);
	height: 6em;
	padding-bottom: 2em;
}

header h1 {
	padding-top: .45em;
	margin-left: 6%;
}
header h2 {
	padding-top: .8em;
	text-align: center;
}

#logo {
    background: url("../images/logo_sm.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: block;
    height: 98px;
    width: 236px;
    text-indent: -9999px;
}
header div span {
	font-size: .6em;
	line-height: 2;
	color: #000;
}

/* ******************************************
	Layout - articles
****************************************** */
section#content article div.group {
	border: 1px solid #d4d5d5;
	padding: 1.5em;
	background-color: ##f6f7f7;
    -moz-box-shadow: 0 0 .65em .325em rgba( 0, 0, 0, .1 );
    -webkit-box-shadow: 0 0 .65em .325em rgba( 0, 0, 0, .1 );
    box-shadow: 0 0 .65em .325em rgba( 0, 0, 0, .1 );
}
section#content article figure { padding: .25em; }
section#content article p { padding: .25em 0; }
section#content article h2 { padding: 13px 0 13px 30px; }

section#content article#page_about div.group p.callout { font-size: 1.08em; }
section#content article#custom p.callout { 
	font-size: 1.15em; 
	font-style: italic; 
	color: #666; 
	line-height: 1.5;
}
section#content article#page_contacts {
	margin-bottom: 1em;
}
/* ******************************************
    Navigation
****************************************** */
/*  Create faux section height using padding */
#nav {
    padding: .65em 0;
}

/* Float heading and capitalize content */
#nav h3 {
    float: left;
    text-transform: capitalize; 
}

/* 
- Remove <ul> list-style and default padding.
- Add a border-top to separate each <li>.
- Add a border-bottom to <ul> to wrap-up border styling. 
- Add margin to separate, push off <ul> from heading/navicon and below #masthead section.
*/

#nav ul {
    list-style: none;
    padding: 0;
    border-bottom: 1px solid #eee;
    margin: .65em 0 .39em;
}

#nav li {
   border-top: 1px solid #eee;
}

/* 
- Style inline <a> to become a block element.
- Update font-size to reflect foundation font scale defined by body text (<p>).
- Override default link color
- Remove default <a> text-decoration of underline.
- Add padding, keeping horizontal and vertical rhythm.
 */

#nav a {
   display: block;
   font-size: 1.063em;
   color: #333;
   text-decoration: none;
   padding: .975em 1.3em; 
}

/*
13. Style :hover for non-touch enabled browsers/devices.
*/

#nav a:hover {
   background: #f8f8f8;
}

/* 
Hide <nav> off-screen
http://37signals.com/svn/posts/3126-another-9999px ]
*/

#nav nav {
    height: 0;
    overflow: hidden;
}

/* ******************************************
    Advanced Checkbox Hack
****************************************** */

body { 
    -webkit-animation: bugfix infinite 1s; 
}

@-webkit-keyframes bugfix {
    from {padding: 0;} 
    to {padding: 0;} 
}

/* 
1. Hide <nav> off-screen / -9999px/-999em technique works best.
*/

#nav input[type=checkbox] {
    position: absolute;
    top: -999em;
    left: -999em;
}

/* 
2. Restore <label> element (Removed in min-width: 45em media query).
3. Present <label> as navicon using a background-image.
4. Hide <label> content - "Menu" - off-screen using negative text-indent.
5. Style <label> to behave like a link using cursor and user-select properties.
*/

#nav label { 
/*    display: block;
    background: url("../images/icon-menu.png") no-repeat right center; */
    text-indent: -999em;
    cursor: pointer;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;
}

/* 
6. Show <nav> on-screen / drop-down menu 
*/

#nav input[type=checkbox]:checked ~ nav {
    height: auto;
    overflow: hidden;  
}

nav li a {
	font-size: 2.5em;
	text-transform: uppercase;
}

/* ******************************************
	Form
****************************************** */
form ul { list-style-type: none; }
input, textarea {
	width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	padding-bottom: 1em;
}
textarea { padding-bottom: 7em; }
form li { padding-bottom: 1em; }
fieldset input { width: auto; }
#contact_email { margin-right: 1em; }
legend { margin-bottom: .5em; }

.send, .clear, #top-btn {
color: rgb(230, 230, 230);
font-size: 20px;
padding: 15px;
text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background: rgb(158, 158, 158);
background: -moz-linear-gradient(90deg, rgb(158, 158, 158) 30%, rgb(120, 120, 120) 70%);
background: -webkit-linear-gradient(90deg, rgb(158, 158, 158) 30%, rgb(120, 120, 120) 70%);
background: -o-linear-gradient(90deg, rgb(158, 158, 158) 30%, rgb(120, 120, 120) 70%);
background: -ms-linear-gradient(90deg, rgb(158, 158, 158) 30%, rgb(120, 120, 120) 70%);
background: linear-gradient(0deg, rgb(158, 158, 158) 30%, rgb(120, 120, 120) 70%);
-webkit-box-shadow: 0px 2px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 2px 5px rgba(50, 50, 50, 0.75);
box-shadow:         0px 2px 5px rgba(50, 50, 50, 0.75);
}
.send { margin-bottom: .5em; }
.send:hover, .clear:hover, #top-btn:hover {
	background: rgb(247, 112, 7);
	background: -moz-linear-gradient(90deg, rgb(247, 112, 7) 30%, rgb(200, 112, 7) 70%);
	background: -webkit-linear-gradient(90deg, rgb(247, 112, 7) 30%, rgb(200, 112, 7) 70%);
	background: -o-linear-gradient(90deg, rgb(247, 112, 7) 30%, rgb(200, 112, 7) 70%);
	background: -ms-linear-gradient(90deg, rgb(247, 112, 7) 30%, rgb(200, 112, 7) 70%);
	background: linear-gradient(0deg, rgb(247, 112, 7) 30%, rgb(200, 112, 7) 70%);	
}

/* ******************************************
	ResponsiveSlides.js http://responsiveslides.com/
****************************************** */
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  
  -moz-box-shadow: 0 0 .65em .325em rgba( 0, 0, 0, .1 );
  -webkit-box-shadow: 0 0 .65em .325em rgba( 0, 0, 0, .1 );
  box-shadow: 0 0 .65em .325em rgba( 0, 0, 0, .1 );
}

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
}

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
}
  
.rslides img {
	display: block;
	height: auto;
	float: left;
	width: 100%;
	border: 0;
}
/* ******************************************
    Footer
****************************************** */
footer { 
	background-color: #1a1a1a; 
	padding: 1em 0;
	color: #fff;
	text-align: center;
}
	
/* ******************************************
    misc
****************************************** */
#top-btn {
	text-decoration: none;
	margin: .5em 30%;
	display: block;
	text-align: center;
	padding: .5em 0;
}

.orange { color: #f77007; }
.pic-r { margin-right: .75em; }
.fll { float: left; }

/* ******************************************
	Media Queries for screen wider than 480px
****************************************** */
@media screen and (min-width: 30em){
	
article#page_location figure.picture, 
article#page_location div.copy { float: left; }

article#page_location figure.picture { padding-right: .75em; }
	
} /* Media Queries for screen wider than 480px */

/* ******************************************
	Media Queries for screen wider than 546px
****************************************** */
@media screen and (min-width: 34.125em){
	#content { 
		width: 94%;
		margin: 0 3%;
	}
	header h1 { float: left; } 
	header h2 { float: right; }
	header h2 {
		padding-right: 6%;
		text-align: left;
		font-size: 132%;
	}
	header h2 span {
		color: #fff;
	}
	div#main {
	    margin: 0 5% 2%;
	}
	
	/* Navigation */
	/*
	1. Remove padding from one-column layout style.
	*/

	#nav {
	    padding: 0;
	}

	/*
	2. Adjust headline baseline using margin-top to align with horizontal menu and margin-right to create a gap/division from the two types of content.
	*/

	#nav h3 {
	     margin: .39em 1.3em 0 0;
	}

	/*
	3. Remove <label> element.
	*/

	#nav label {
	    display: none;
	}

	/* 
	4. Show <nav> on-screen.
	*/

	#nav nav {
	    height: auto;
	    overflow: visible;
		padding-top: 1em;
		clear: both;
	}

	/* 
	5. Remove border and margin from one-column layout style.
	*/

	#nav ul {
	    border: 0;
	    margin: 0;
	    }

	/* 
	6. Display <li> as inline for horizontal menu layout.
	7. Remove border.
	*/

	#nav li {
	    display: inline;
	    border: 0;
	}

	/* 
	8. Display <a> from block to inline-block to remain inline for horizontal menu layout.
	*/

	#nav a {
	    display: inline-block;
	    }
	#nav a:hover {
		color: #f77007;
	   background: transparent;
	}
	
}

/* ******************************************
	Media Queries for screen wider than 572px
****************************************** */
@media screen and (min-width: 35.75em){
	header h2 {
		font-size: 155%;
	}
	#top-btn {
		position:fixed;
		z-index: 3;
		bottom: 1em;
		right: -1em;
		margin: 0;
		padding: .75em 2em .75em .75em;
	}

}

/* ******************************************
	Media Queries for screen wider than 720px
****************************************** */
@media screen and (min-width: 45em){
#container-outer {
	background: url("../images/bg_top.gif") repeat-x scroll center top #eceded;
}
#container-inner {
    background: url("../images/bg_top_img.jpg") no-repeat scroll center top rgba(0, 0, 0, 0);
	height: 10em;
}
#logo {
    background: url("../images/logo.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: block;
    height: 123px;
    width: 295px;
    text-indent: -9999px;
}
header div.wrapper { padding-top: 2.25em; }
header h2 { font-size: 175%; }
#nav li { display: block; }
#nav ul li a:first-child { padding-top: 0; }
#nav nav { 
	float: left; 
	padding-top: 0;
}
#main { 
	padding-top: 3em; 
	clear: both;
}
.rslides { width: initial; }
.rslides, article { margin-left: 17%; }
#nav nav { position: relative;  }
article#page_location figure.picture { padding-right: 1em; }
	footer { padding: 2em 0; }
	
}  /* end @media screen and (min-width: 45em) */

/* ******************************************
	Media Queries for screen wider than 60em (960px)
****************************************** */
@media screen and (min-width: 60em) {
	#content {
	    margin: 0 15%;
	    width: 80%;
	}
	header h1 {
	    margin-left: 0;
	}
	header h2 {
	    padding-right: 13%;
		font-size: 200%;
	}
	.rslides, article {
	    margin-left: 7%;
	}
	#nav a {
		font-size: 200%;
		padding: .15em 0;
	}
	div#main { margin: 15% 0 0 1%; }
	.rslides, article { margin: 0 8%; }
	article#page_location figure.picture { padding-right: 2em; }
	
}

/* ******************************************
	Media Queries for screen wider than 73.5em (1176px)
****************************************** */
@media screen and (min-width: 73.5em) {
	#content {
	    margin: 0 18%;
	    width: 74%;
	}
	#nav a {
		font-size: 240%;
	}
	section#content article h2 {
		font-size: 2em;
		padding-top: 1em;
	}
	#top-btn {
		position:fixed;
		z-index: 3;
		bottom: 1em;
		right: -1em;
		padding-right: 2em;
		padding-top: .8em;
	}
	
}