/* RESET */

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;
}
/* HTML5 display-role reset for older browsers */
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: '';
	content: none;
}
table {

	border-collapse: collapse;
	border-spacing: 0;
}
textarea {

	overflow: auto;
	resize: none; /* prevents Chrome from permitting resize */
}

/* WEBFONTS */

@font-face {
    font-family: 'Afta Serif';
    src: url('/fonts/aftaserifthin-regular-webfont.eot');
    src: url('/fonts/aftaserifthin-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/aftaserifthin-regular-webfont.woff2') format('woff2'),
         url('/fonts/aftaserifthin-regular-webfont.woff') format('woff'),
         url('/fonts/aftaserifthin-regular-webfont.ttf') format('truetype'),
         url('/fonts/aftaserifthin-regular-webfont.svg#afta_serifregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Afta Serif';
    src: url('/fonts/aftaserifthin-italic-webfont.eot');
    src: url('/fonts/aftaserifthin-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/aftaserifthin-italic-webfont.woff2') format('woff2'),
         url('/fonts/aftaserifthin-italic-webfont.woff') format('woff'),
         url('/fonts/aftaserifthin-italic-webfont.ttf') format('truetype'),
         url('/fonts/aftaserifthin-italic-webfont.svg#afta_serifitalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Cantarell';
    src: url('/fonts/cantarell-bold-webfont.eot');
    src: url('/fonts/cantarell-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/cantarell-bold-webfont.woff2') format('woff2'),
         url('/fonts/cantarell-bold-webfont.woff') format('woff'),
         url('/fonts/cantarell-bold-webfont.ttf') format('truetype'),
         url('/fonts/cantarell-bold-webfont.svg#cantarellbold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Cantarell';
    src: url('/fonts/cantarell-regular-webfont.eot');
    src: url('/fonts/cantarell-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/cantarell-regular-webfont.woff2') format('woff2'),
         url('/fonts/cantarell-regular-webfont.woff') format('woff'),
         url('/fonts/cantarell-regular-webfont.ttf') format('truetype'),
         url('/fonts/cantarell-regular-webfont.svg#cantarellregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* MAIN */

html,body {

    height: 100%;
    width: 100%;
}

h1,h2,h3,h4,h5,h6 {	

	font-weight: normal;
}

a {

	text-decoration: none;
	color: #fff;
}

h1,h2,h3,h4 {

	font-family: 'Cantarell';
	font-weight: bold;
	color: #fff;
	text-transform: uppercase;

}

h4 {

	text-transform: none;
}

/* GLOBAL IDENTIFIERS */

#background {

	/* Set rules to fill background */
	min-height: 100%;
	min-width: 1000px;

	/* Set up proportionate scaling */
	width: 100%;
	height: auto;

	/* Set up positioning */
	position: fixed;
	top: 0;
	left: 0;
	z-index: -10;
}

@media screen and (max-width: 1000px) { /* Specific to this particular image */

	#background {

		left: 50%;
		margin-left: -500px;   /* 50% */
	}
}

#header {

	margin: 0 auto;
	z-index: 50;
	position: relative;
}

#header h1 {

	text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.6);
	text-transform: uppercase;
	z-index: 50;
	text-align: center;
}

#nav {

	margin: 0 auto;
	z-index: 50;
	font-weight: bold;
}

#nav ul {

	text-align: center;
}

#nav ul li {

	position: relative;
	margin-top: 20px;
	margin-bottom: 35px;
	margin-right: 2px;
	border: 1px solid rgb(170, 170, 170); 	/* legacy */
	border: 1px solid rgba(255, 255, 255, .35);
	-webkit-background-clip: padding-box;
    background-clip: padding-box;
    text-align: center;
    display: inline-block;
}

#nav ul li a {

	display: block;
	height: 100%;
	color: #000;
	padding: 9px 8px;
	padding-right: 10px;
	font-family: 'Cantarell';
	text-transform: uppercase;
	background: #fff;
}

#nav ul li a:active {

	color: #fff;
	background: #000;
}

#wrapper {

	height: 100%;
	width: 100%;
}

#secondaryWrapper {

	position: relative;
	width: 100%;
	text-align: center;
	display: table;
}

/* INDEX PAGE IDENTIFIERS */

body[id="index"] {

	overflow: hidden;
}

body[id="index"] #header {

	width: 60%;
	top: 5%;
}

body[id="index"] h1 {

	font-size: 68px; /* fallback */
	font-size: 22vmin;
}

body[id="index"] #nav {

	bottom: 10%;
	left: 0;
	right: 0;
	position: absolute;
}

#fontLoader p {

	position: absolute;
	top: -100%;
}

#fontLoader p:first-child {

	font-family: 'Afta Serif';
}

#fontLoader p:last-child {

	font-family: 'Afta Serif';
	font-style: italic;
}

/* PHOTO PAGE IDENTIFIERS */

body[id="photo"] #wrapper {

	padding-top: 65px; /* fallback */
	padding-top: 20vmin;
}

body[id="photo"] #headerWrapper {

	position: relative;
	width: 246px;
	top: 4%;
	margin: 0 auto;
}

body[id="photo"] #header h1 {

	float: left;
	font-size: 26px;
}

body[id="photo"] #header h2 a {

	float: left;
	font-size: 16px;
	background-color: #fff;
	color: #000;
	padding: 6px;
	padding-left: 5px;
	padding-right: 6px;
	margin-left: 10px;
}

body[id="photo"] #nav {

	position: relative;
	z-index: 50;
	clear: both;
	margin-bottom: 10%;
}

.albumContainer {

	position: relative;
	display: inline-block;
	width: 225px;
	height: 225px;
	background: #000;
	margin-bottom: 30px;
	margin-right: 20px;
	margin-left: 20px;
	z-index: 30;
	-moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%;
    border: 4px solid white;
}

.albumTitleOverlay {

	position: relative;
	height: 30px;
	background: #fff;
	text-align: center;
	margin: 0 auto;
	display: inline-block;
	top: 200px;
}

.albumTitleOverlay h3 {

	padding-top: 9px;
	padding-left: 20px;
	padding-right: 20px;
	color: #000;
	font-size: 13px;
}

body[id="photo"] a[href*="nicaragua"] .albumContainer {

	background-image: url('../images/album1.jpg');
	background-size: 100%;
}

body[id="photo"] a[href*="la-cangreja"] .albumContainer {

	background-image: url('../images/album2.jpg');
	background-size: 100%;
}

body[id="photo"] a[href*="panama"] .albumContainer {

	background-image: url('../images/album3.jpg');
	background-size: 100%;
}

body[id="photo"] a[href*="san-lucas"] .albumContainer {

	background-image: url('../images/album4.jpg');
	background-size: 100%;
}

body[id="photo"] a[href*="wedding"] .albumContainer {

	background-image: url('../images/album5.jpg');
	background-size: 100%;
}

body[id="photo"] a[href*="three-peaks"] .albumContainer {

	background-image: url('../images/album6.jpg');
	background-size: 100%;
}

body[id="photo"] a[href*="selection-weekend"] .albumContainer {

	background-image: url('../images/album7.jpg');
	background-size: 100%;
}

body[id="photo"] a[href*="empanada-night"] .albumContainer {

	background-image: url('../images/album8.jpg');
	background-size: 100%;
}

/* SUB-PHOTO PAGE IDENTIFIERS */

body[id="subPhoto"] #wrapper {

	padding-top: 72px;
}

body[id="subPhoto"] #headerWrapper {

	position: relative;
	width: 246px;
	top: 4%;
	margin: 0 auto;
}

body[id="subPhoto"] #header h1 {

	float: left;
	font-size: 26px;
}

body[id="subPhoto"] #header h2 a {

	float: left;
	font-size: 16px;
	background-color: #fff;
	color: #000;
	padding: 6px;
	padding-left: 5px;
	padding-right: 6px;
	margin-left: 10px;
}

body[id="subPhoto"] #nav {

	position: relative;
	z-index: 50;
	clear: both;
}

body[id="subPhoto"] h4 {

	font-family: "Afta Serif";
	font-weight: normal;
	font-size: 26px;
	background: white;
	color: #000;
	padding-top: 13px;
	margin-left: 4.5%;
	margin-right: 4.5%;
	position: relative;
	top: 4px;
}

body[id="subPhoto"] p {

	font-family: "Afta Serif";
	color: #000;
	font-size: 14px;
	padding-left: 15px;
	padding-right: 15px;
	line-height: 1.5;
	margin-bottom: 12px;
	background: white;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-left: 4.5%;
	margin-right: 4.5%;
}

body[id="subPhoto"] #secondaryWrapper img {

	width: 90%;
	margin-top: 2%;
	margin-bottom: 3%;
	border: 2px solid #fff;
	max-width: 100%;
}

/* VIDEO PAGE IDENTIFIERS */

body[id="video"] #wrapper {

	padding-top: 75px;
}

body[id="video"] #headerWrapper {

	position: relative;
	width: 246px;
	top: 4%;
	margin: 0 auto;
}

body[id="video"] #header h1 {

	float: left;
	font-size: 26px;
}

body[id="video"] #header h2 a {

	float: left;
	font-size: 16px;
	background-color: #fff;
	color: #000;
	padding: 6px;
	padding-left: 5px;
	padding-right: 6px;
	margin-left: 10px;
}

body[id="video"] #nav {

	position: relative;
	z-index: 50;
	clear: both;
	margin-bottom: 10%;
}

.videoContainer {

	background-color: black;
	width: 280px;
	height: 157px;
	margin-right: 15px;
	margin-left: 15px;
	margin-bottom: 5px;
	display: inline-table;
	border: 1px solid white;
}

.videoContainer h3 {

	font-size: 32px;
	vertical-align: middle;
	display: table-cell;
	line-height: 1.2;
	text-shadow: 0px 0px 7px rgba(0, 0, 0, 1);
}

body[id="video"] a[href*="casa-cambranes"] .videoContainer {

	background: url(../images/video6.jpg) repeat 0 0;
	background-size: cover;
}

body[id="video"] a[href*="casa-de-lis"] .videoContainer {

	background: url(../images/video5.jpg) repeat 0 0;
	background-size: cover;
}

body[id="video"] a[href*="raleigh-roadtrip"] .videoContainer {

	background: url(../images/video4.jpg) repeat 0 0;
	background-size: cover;
}

body[id="video"] a[href*="kit-list"] .videoContainer {

	background: url(../images/video3.jpg) repeat 0 0;
	background-size: cover;
}

body[id="video"] a[href*="ana-solorzano"] .videoContainer {

	background: url(../images/video2.jpg) repeat 0 0;
	background-size: cover;
}

body[id="video"] a[href*="john-wan"] .videoContainer {

	background: url(../images/video1.jpg) repeat 0 0;
	background-size: cover;
}

.duration {

	position: relative;
	bottom: 35px;
	right: 0;
	font-family: Cantarell;
	font-size: 12px;
	font-weight: bold;
	background: #fff;
	color: #000;
	width: 37px;
	margin: 0 auto;
	padding: 2px;
}

/* CONTACT PAGE IDENTIFIERS */

body[id="contact"] #headerWrapper {

	position: relative;
	width: 267px;
	top: 4%;
	margin: 0 auto;
}

body[id="contact"] #secondaryWrapper {

	padding-top: 65px;
	padding-bottom: 40px;
}

body[id="contact"] #header h1 {

	float: left;
	font-size: 26px;
}

body[id="contact"] #header h2 a {

	float: left;
	font-size: 16px;
	background-color: #fff;
	color: #000;
	padding: 6px;
	padding-left: 5px;
	padding-right: 6px;
	margin-left: 10px;
}

body[id="contact"] #nav {

	position: relative;
	z-index: 50;
	clear: both;
	margin-bottom: 10%;
}

body[id="contact"] form {

	margin-left: 5%;
	margin-right: 5%;
}

body[id="contact"] label {

	color: #fff;
	font-family: "Afta Serif";
}

body[id="contact"] input[type="text"],body[id="contact"] input[type="email"] {

	display: block;
	margin: 15px auto 15px;
	width: 90%;
	height: 25px;
	text-align: center;
	border: none;
	font-size: 16px;
	border: 1px solid #000;
}

body[id="contact"] input[type="submit"] {

	width: 65px;
	margin-bottom: 15px;
}

body[id="contact"] textarea {

	display: block;
	margin: 18px auto 20px;
	width: 86%;
	height: 150px;
	font-family: Arial;
	border: none;
	font-size: 16px;
	padding: 5px 6px;
	border: 1px solid #000;
}

/* MESSAGE PAGE IDENTIFIERS */

body[id="message"] {

	overflow: hidden;
}

body[id="message"] #header {

	margin-top: 20px;
}

body[id="message"] h1 {

	font-size: 26px;
}

body[id="message"] h4 {

	font-family: "Afta Serif";
	font-weight: normal;
	text-align: center;
	font-size: 26px;
	margin-top: 50px; /* for legacy browsers */
	margin-top: 18vh;
}

body[id="message"] p {

	font-family: "Afta Serif";
	color: #fff;
	text-align: center;
	margin: 0 60px;
	font-style: italic;
	line-height: 1.5;
	margin-top: 15px; /* for legacy browsers */
	margin-top: 5vh;
}

body[id="message"] #nav {

	bottom: 7%;
	left: 0;
	right: 0;
	position: absolute;
}