@charset "UTF-8";
/* CSS Document */

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

body {
  background: url("images/bg.png") repeat fixed 0 0 transparent;
  font-family: 'Raleway',sans-serif;
  
  font-size: 16px;
}
h1 {
  color: #4c4c4c;
  font-size: 1.5em;
  font-weight: 200;
  letter-spacing: 0.08em;
  line-height: 110%;
  margin: 0.25em 0 0.5em;
  padding: 10px 0;
  text-transform: uppercase;
}
.container {
  margin: auto;
  max-width: 768px;
  position: relative;
  width: 100%;
}
.nav {
  top: 40px;
  display: none;
  z-index: 99;
 font-family: 'Montserrat', sans-serif;

}
.nav ul {
 /* background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5);
  border-right: 6px solid #1598c9;
  box-shadow: -10px 10px 0 rgba(0, 0, 0, 0.15);*/
   white-space: nowrap;
 overflow:hidden;
 display: block;
}
  
.hide-btn, .show-btn, .top a {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.25);
  border-radius: 0 5px 5px 0px;
  color: #FFFFFF;
  cursor: pointer;
  font-size: 1em;
  margin: 1.5em 0;
  padding: 1em 0.5em;
  transition: all 0.25s ease-in 0s;
  width: 55px;
  text-decoration:none;
  
}

.hide-btn:hover, .show-btn:hover {padding-left: .75em; text-transform: none; display:block;  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.45); }
.show-btn {display:none;}
.nav li a {
  border-bottom: 1px solid #e7e7e7;
  color: #4c4c4c;
  display: block;
  font-size: .9375em;
  margin: 5px;
  padding: 0.7em 1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.15s ease-in 0s;
  width: auto;
  letter-spacing: .055em;
}

.nav li a.green {border-bottom: none;}

img {
  opacity: 1;
  margin-bottom: 1em;
} 


.divider {
 background: none repeat scroll 0 0 rgba(0,0,0,0.05);
  border-bottom: 1px solid #FFFFFF;
  clear: both;
  height: 2px;
  margin: 5px 0;
  width: 100%;
}
h2 {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.9);
  border-radius: 0 0 0;
  color: #FFFFFF;
  display: block;
  float: left;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 0.5em 1em;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
  width: auto;
}
.clear{clear:both;}
a.green:hover  {color:#8dc73f;}
a.pink:hover  {color: #eb178f;}
a.orange:hover  {color: #f36523;}
a.blue:hover {color: #1597c9;}
h2.green {border-top: solid 3px #8dc73f; }
h2.pink{border-top: solid 3px #eb178f; } 
h2.blue{border-top: solid 3px #f36523; }
h2.orange{border-top: solid 3px #1597c9; }


/*2015 update*/	
.nav h1 {
  color: #8f8f8f;
  font-size: 2em;
  margin: 0;
  padding: 0.5em 0.5em 0;
  text-align: left;
}
.nav h2 {
  background: transparent none repeat scroll 0 0;
  float: none;
  font-size: 1.875em;
  font-weight: normal;
  line-height: 128%;
  margin: 0;
  padding: 0.15em 0.5em 0;
  text-align: left;
  color: #ccc;
}
.nav {
  background: #424242 none repeat scroll 0 0;
  border-right: 8px solid #cececf;
  box-shadow: -8px 0 0 rgba(0, 0, 0, 0.15) inset;
  display: block;
  font-family: "Montserrat",sans-serif;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 255px;
  z-index: 99;
  transition: ease .5s;
}
.nav.hide {left: -255px; transition: ease .5s;}

.nav ul  {margin-top: .5em; clear: both; position: relative;}
.nav ul li a {
  color: #8e8e8e;
  border-bottom: 1px solid #565656;
  margin: 0;
  transition: ease .5s;
  padding: 1em;
}
#close {position: absolute; top: 0; right: 0; width: 45px; height: 20px; background: rgba(0,0,0,0.25); padding: 10px 0;  display: block; cursor: pointer;}
#open {position: absolute; top: 0; left: 100%; width: 45px; height: 20px; background: rgba(0,0,0,0.25); padding: 10px 0;  display: block; cursor: pointer;}

.nav #open {opacity: 0; display: none; transition: ease .5s;}
.nav.hide #open {opacity: 1; display: block; transition: ease .5s; }

#close img, #open img {display: block; margin: auto; width: 100%; height: auto; max-width: 18px; opacity: .75;}

.nav ul li a:hover {background: rgba(255,255,255,0.1); transition: ease .5s;}
.container.pull {padding: 2em 0; margin: 0 auto;}
.container {padding: 2em 0 0 25%; margin: 0; transition: ease .75s;}


@media (max-width: 767px) {
	.nav  {display: none;}
	.container  img {width: 100%; height:auto;}
	.container {padding-left: 0;}

	}	
	
	@media (min-width: 767px) and (max-width: 1024px)  {
		body {font-size: 13px;}
		.nav {width: 200px;}
		.nav.hide {left: -200px;}
		}
		
		
.nav .img-holder {
  border: 5px solid #8e8e8e;
  border-radius: 50%;
  height: 115px;
  margin: 1em;
  
  overflow: hidden;
  position: relative;
  width: 115px;
}
.nav .img-holder img {display: block; margin: auto; width: 100%; height: auto;}