/*
Theme Name: Simple Parallax Website
Description: Simple Parallax Scrolling Effect
Author: Samuel Dalusung
*/

/*= GENERAL STYLING
-----------------------*/

body{
	margin: 0 auto;
	padding: 0;
	width: 100%;
}

h1 { 
   font-family: Oswald;
   font-weight: normal;
   font-size: 16px;
   text-align: center;
   margin: 5px 0;
	padding: 0;
	z-index: 1;
	position: relative;
}

h2 {
   font-family:"Arvo";
   font-weight: normal;
   font-size: 40px;
   text-align: center;
   color: #fff;
   margin: 0;
	padding: 0;
}

h3 {
   font-family: Oswald;
   font-weight: normal;
   font-size: 16px;
   text-align: center;
   margin: 5px 0;
	padding: 0;
	z-index: 1;
	position: relative;
}



.center 
	{ 
	margin: 0 auto; 
	}
.content{ 
  margin: 0 auto; 
  /*width: 960px; */
  width:90%;
  }
.clear { clear: both; }
a.lpanel { float: left; color: #e1e1e1; font-size: 12px; font-family:"Wellfleet"; text-decoration: none; margin: 7px 11px; }
a.rpanel { float: right; color: #e1e1e1;  font-size: 12px; font-family:"Wellfleet"; text-decoration: none; margin: 7px 11px; }

a.lpanel:hover{ color: #fff; }
a.rpanel:hover{ color: #fff; }
/*= HEADER & NAVIGATION
-----------------------*/

#header { 
	width: 100%; 
	background: url('../images/header-bg.png'); 
	height: 78px; 	
	position: fixed;
	/*margin-top: 30px;*/
	margin-top: 5px;
}

#nav {
	 width: 90%; 
	 float: left; 
	 margin-top: 0px; 
	 }
#logo a { color: #fff; text-decoration: none; float: left; font-size: 30px; margin-top: 20px; color: #fff; font-family:"Wellfleet"; font-weight: bold; }
#nav ul{
	list-style: none;
	display: block;
	margin: 0 auto;
	list-style: none;	
}

#nav li{
	margin-top: 0px;	
	float: left;
	padding-left: 5%;
}

#nav li a { color: #fff; opacity:0.6; font-size: 16px; text-decoration: none; font-family: 'Wellfleet'; }
#nav li a.active { 
	  /*color: #fff; */
	  opacity:1; 
	  border-bottom: 1px solid #ebe5dc; 
	  }
#nav li a:hover { color: #fff; opacity:1;  }

/*=TWO COLUMN FLUID
-----------------------*/
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.left-column, .right-column, footer, header {  border: 1px solid  #ccc; padding: 1.25em; margin: .5em; }

/*.nav {
  list-style: none;
  margin-left: 0;
  margin-bottom: 0;
  padding-left: 0;
}

.nav > li,
.nav > li > a {
  display: inline-block;
  *display: inline;
  zoom: 1;
}
*/

.inline-items {
  margin-top: 0;
}

.inline-items li {
  margin-left: 0;
  border-left: 1px solid black;
  padding-left: 10px;
  padding-right: 10px;
}

.inline-items li:first-child {
  margin-left: 0;
  border: none;
  padding-left: 0;
  padding-right: 10px;
}

.inline-items li:last-child {
  padding-right: 0;
}


/* MEDIA QUERIES */
@media screen and (min-width: 800 px ) {

	.columns-container { 
		width:70%;
		margin:0 auto;
		float: left;
	}

		.left-column { 
		margin-right: 2em;
		float: left;
		display:inline-block;
		}
	  
		.right-column { 
			/*width: 18.75em;
			margin-left: -19.3em;*/
		  width:425 px;		  
		  display:inline-block;
		  float: left;
		  position:relative;
		  width:425px; /*Width of right column in pixels*/
		  margin-left: -425px; /*Set left margin to -(RightColumnWidth) */
		  height:auto;
	  } 
		

}

		
		.dLeft{
			float:left;
			display:inline-block;
			margin-right: 425px; /*Set right margin to RightColumnWidth*/
			padding:1em;
			}
		.dRight{
			/*float:right;*/
			float:left;
			display:block;
			position:relative;
			width:360px; /*Width of right column in pixels*/
			margin-left: -360px; /*Set left margin to -(RightColumnWidth) */
			height:auto;
		}  

/*= QUOTES AND SOME ELEMENTS
-----------------------*/
.quotes {   
	 font-family: 'Goudy Bookletter 1911', serif;
	 font-weight: normal;
	 font-size: 20px;
	 text-align: left;
	 /*margin: 50px auto;*/
	 margin:20px 0px 50px 0px;
	}
 .quotes_container { 
	 width: 70%; 
	 margin: 0 auto; 
	 }
   
 .author_name_white { font-family:"Wellfleet";  margin: 70px 0 0 75px; color: #fff; font-size: 20px; }  
 .author_name_gray { font-family:"Wellfleet";  margin: 70px 0 0 75px; color: #94a4a4; font-size: 20px; }  

/*= BUTTONS
-----------------------*/

button.btn-know { 
	padding: 15px 47px; 
	margin: 40px 38.8%;
	text-align: center;
	border: 4px solid #fff; 
	color: #fff; 
	background: transparent; 
	font-size: 19px;
	cursor: pointer;
	text-shadow: -1px 2px 0px rgba(90, 90, 90, 0.56);
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

.btn-know:hover { background: #fff; color: transparent; }
ul.built { list-style: none; margin: 0 auto; width: 730px; }
.built li img{ float: left; padding-right: 34px; }



/*= SLIDES STYLING
-----------------------*/

#slide1, #slide2{ width: 100%; }
#slide1{
	/*background:url('../img/slide1.jpg') 50% 0 no-repeat fixed;*/
	background-image:url(../images/slide1-bg.png);
	background-color:#ea844a;
	color: #fff;
	height: 600px;
	margin: 0;
	padding: 150px 0 260px 0;
	background-size: cover;
}

#slide2{
	background-color: #fff;
	color: #827f7c;
	height: 700px;
	margin: 0 auto;
	overflow: hidden;
	padding: 90px 0;
}

#slide3{
	background-color:#cabea8;
	color: #fff;
	height: 600px;
	padding: 140px 0 0 0;	
	background-size: cover;
}

#slide4{
	background-color:#a14240;
	color: #fff;
	height: 500px;
	padding: 140px 0;
}

#slide5{
	background-color:#ebe5dc;
	height: 340px;
	margin: 0 auto;
	padding: 20px 0;
	color: #827f7c;
	background-size: cover;
}


/*= FOR LIGHTBOX
-----------------------*/
/* padding-bottom and top for image */
.mfp-no-margins img.mfp-img {
	padding: 0;
}
/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after {
	top: 0;
	bottom: 0;
}
/* padding for main container */
.mfp-no-margins .mfp-container {
	padding: 0;
}


/* 

for zoom animation 
uncomment this part if you haven't added this code anywhere else

*/


.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
	opacity: 0;
	-webkit-backface-visibility: hidden;
	-webkit-transition: all 0.3s ease-out; 
	-moz-transition: all 0.3s ease-out; 
	-o-transition: all 0.3s ease-out; 
	transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
		opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
		opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container, 
.mfp-with-zoom.mfp-removing.mfp-bg {
	opacity: 0;
}



/*= FOOTER 
-----------------------*/

#copyright  { color: #fff; font-family:"Wellfleet";  font-size: 14px; margin-top: 100px; text-align: center;  }
#copyright  a { text-decoration: none; color: #fff;  }


/*= FOR LIGHTBOX
-----------------------*/
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 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { overflow-y: scroll; }
/*body { 
  background: #f0f0f0; 
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #313131;
  font-size: 62.5%; 
  line-height: 1; 
}
*/

::selection { background: #a4dcec; }
::-moz-selection { background: #a4dcec; }
::-webkit-selection { background: #a4dcec; }

::-webkit-input-placeholder { /* WebKit browsers */
  color: #ccc;
  font-style: italic;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #ccc;
  font-style: italic;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #ccc;
  font-style: italic;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #ccc !important;
  font-style: italic;  
}

br { display: block; line-height: 2.2em; } 

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

input, textarea { 
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none; 
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; } 

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

#topbar {
  background: #4f4a41;
  padding: 10px 0 10px 0;
  text-align: center;
  height: 36px;
  overflow: hidden;
  -webkit-transition: height 0.5s linear;
  -moz-transition: height 0.5s linear;
  transition: height 0.5s linear;
}
#topbar a {
  color: #fff;
  font-size:1.3em;
  line-height: 1.25em;
  text-decoration: none;
  opacity: 0.5;
  font-weight: bold;
}
#topbar a:hover {
  opacity: 1;
}


.center { display: block; text-align: center; }


/** reset lightbox position **/
#lightbox-container-image-data-box {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

/** page structure **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 10px;
}


#thumbnails { 
	display: block; 
	margin-bottom: 10px;
	width:700px;
	margin-left:20%;
	 }
#thumbnails ul li { 
	float: left; 
	margin-right: 26px; 
	margin-bottom: 12px; 
	border: 0px solid #cabea8;
	}
	

/** clearfix **/
.clearfix:after { 
	content: "."; 
	display: block; clear: both; visibility: hidden; line-height: 0; height: 0; 
	}
.clearfix { 
	display: inline-block; 
	}
 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }



#thumbnails2 { 
display: block; 
margin-bottom: 13px;
width:700px;
margin-left:20%;
 }
#thumbnails2 ul li { 
float: left; 
margin-right: 26px; 
margin-bottom: 13px; 
border: 2px solid #8e8886;
}



/*= GENERAL LAYOUT
-----------------------*/
.footer{	
	 font-family: 'Goudy Bookletter 1911', serif;
	 font-weight: normal;
	 font-size: .8em;
	 text-align: left;
	 color:#a69d8b;
	 /*margin: 50px auto;*/
	 margin:auto;
	}
	


.vertlist ul{
	list-style: none;
	display: block;
	margin: 0 auto;
	list-style:circle;	
}

.vertlist li{
	margin-top: 0px;	
	/*float: left;*/
	padding-left: 5%;
	padding:5px;
}

.vertlist li a { 
color: #fff; 
opacity:0.6; 
font-size: 14px; 
text-decoration: none; 
font-family: 'Wellfleet'; 
}
.vertlist li a.active { 
	  /*color: #fff;*/ 
	  opacity:1; 
	  }
.vertlist li a:hover { 
color: #fff; 
opacity:1;  
}