/*

	01. Body and things that we don't change
	02. Navigation
	03. Setting the main's sections
	04. Home Section
	05. CONTACT SECTION
    06. News Section
	07. Social Module
	08. Modal overlay
	09. Media queries
	10. Key Frames Fade In		
*/


/* 01. BODY AND head-wrap ================================================== */

body {
	-webkit-font-smoothing: antialiased;
   font-smoothing: antialiased;
	-webkit-transition: background-color 0.5s ease-in-out;
	-moz-transition: background-color 0.5s ease-in-out;
	-o-transition: background-color 0.5s ease-in-out;
	transition: background-color 0.5s ease-in-out;
}

/*______scrollto colors______*/
.color-begin {background-color: #FFF;}
.color-about {background-color: #ffffab;} /* #ffffcd */
.color-credits {background-color: #aaa;} /* #ffaaab #ffcccb */ 
.color-news {background-color: #ffffab;} /* #abffff #cdffff */
.color-contact {background-color: #aaa;} /* #abffaa #cdffcc */


html, body {
	font-family: "Inconsolata", monospace, sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 21px;
	margin: 0px auto;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	line-height: 1.5em;
}

.row {
	text-align: left;
}

#top, #bottom, #left, #right {
	background: #FFF;
	position: absolute;
	z-index: 9999 !important;
}

#left, #right {
	top: 0;
	bottom: 0;
	width: 15px;
}

#left {
	left: 0;
}

#right {
	right: 0;
}

#top, #bottom {
	left: 0;
	right: 0;
	height: 15px;
}

#top {
	top: 0;
}

#bottom {
	bottom: 0;
}

#left, #right {
	top: 0;
	bottom: 0;
	width: 15px;
}

#left {
	left: 0;
}

#right {
	right: 0;
}

#top, #bottom {
	left: 0;
	right: 0;
	height: 15px;
}

#top {
	top: 0;
}

#bottom {
	bottom: 0;
}

section a, section a:hover, footer a, footer a:hover {
	color: #333;
}

section a:hover {
	border-bottom: 2px solid #333;
}

section p {
	font-size: 0.9em;
}

h2 {
	font-family: "Open Sans", sans-serif;
	font-style: normal;
	font-weight: 700;
	color: #424242;
	font-size: 1.9em;
	padding-bottom: 30px;
	border-bottom: 5px solid #424242;
	line-height: 1em;
	text-transform: uppercase;
}

h3 {
	font-weight: bold;
}

div.wild-seq-one {
	background-image: url(../img/tenses.jpg);
/* 	background-position-y: 3213px; */
}

div.wild-seq-two {
	background-image: url(../img/holland-fest.jpg);
}

#head-wrap {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 500px;
	text-align: center;
	margin: 0 auto;
	margin-top: -250px; /* Half the height */
	margin-left: -350px; /* Half the width */
}

/* 02. NAVIGATION ================================================== */

nav #logo {
	float: left;
	padding-top: 15px;
	padding-bottom: 15px;
}

nav #logo a {
	color: #333;
}

nav {
	z-index: 42;
	width: 100%;
/* 	background: url(../img/backie.png); */
	background-color: rgba(255,255,255,0.96);
	height: 60px;
}

nav ul {
	float: right;
	display: inline-block;
	margin-right: 10px;
	list-style: none;
	padding-top: 15px;
}

nav ul li {
	display: inline-block;
	list-style: none;
	float: left;
	padding: 0px 20px;
}

nav ul li a {
	color: #333;
	position: relative;
	display: inline-block;
	font-weight: 300;
	text-decoration: none;
	font-size: 1em;
	text-transform: uppercase;
	text-decoration: none;
	display: block;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

nav li a:hover, nav li a.selected {
/*	color: #ffffcd;  #00e8b6; */
/* 	text-decoration: underline; */
	border-bottom: 2px solid #333;
}

.sticky {
	position: fixed;
	top: 0px;
}
/* Mobile Navigation Display none if no iDevice */

nav select {
	display: none;
}

/* 03. SETTING OF MAIN SECTIONS  ================================================== */


#home {
	width: 100%;
	height: 100%;
	color: #FFF;
/* 	background: url(../img/z-kitchen.jpg) no-repeat center center fixed; */
	background-image: url(../img/z-kitchen.jpg);
	background-position: center; 
	background-repeat: no-repeat;
/* 	position: fixed; */
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;  /*  FIXED FOR IE  */
/* 	overflow: hidden; */

}

#about {
	padding: 170px 0px 170px;
}

#credits {
	padding: 130px 0px 130px;
}

#news {
	padding: 130px 0px 50px;
}

#contact {
	padding: 130px 0px 250px;
}

footer {
	padding: 20px 0;
/* 	background-color: #333; */
}

#cover {
	padding: 100px 0px 170px;
}

/* 04. HOME SECTION  ================================================== */

#home h1 {
/* 	position: relative; */
	margin: 10% auto 1em auto;
	z-index: 999;
	font-size: 3.5em;
	line-height: 1em;
	text-align: center;
}

#home p {
	font-size: 1.5em;
	text-align: center;
	margin-bottom: 3em;
}

#down_button a {
	position: absolute;
	width: 80px;
	height: 80px;
	bottom: 5%;
	left: 50%;
	margin-left: -40px;
}

#down_button a:hover {
	background-position: 0px 0px;
	border: 0;
}


/* 05. CONTACT SECTION ================================================== */

/* BLOCK CONTACT RIGHT */

#contact img {
	width: 240px;
	height: 240px;
}


/* 06. NEWS SECTION ================================================== */

#news a {
    text-decoration: none;
}


/* 07. SOCIAL MODULE ================================================== */


.trailer {
	margin-top:15px;
/* 	-webkit-box-shadow:#FFFFFF 4px 4px 0 0; */
/*   box-shadow:#FFFFFF 4px 4px 0 0; */
  -webkit-transition: all 0.1s cubic-bezier(0, 0, 0.25, 1);
  border: 2px solid #FFFFFF;
  display: block;
  padding: 20px;
  font-size: 1em !important;
  text-align: center;
  text-transform: uppercase;
	padding: 10px;
	width: 140px;
	margin-left: auto;
	margin-right: auto;
}

.trailer a {
	text-decoration: none;
	color: #FFF;
}

.trailer a:hover{
/* 	text-decoration: line-through; */
	color: #333;
	background-color: #fff;
}

.subtitle {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 13px;
	font-family: "Open Sans",sans-serif;
	letter-spacing: 3px;
}

.xtra-pad-left {
	padding-left:25px;
}

#social_media {
  bottom: 0;
  margin-bottom: 30px;
  margin-right: 30px;
  max-width: 250px;
  position: fixed;
  right: 0;
  width: auto;
  z-index: 2;
}

.social {
    padding-top: 5px;
}

.img-border {
	border: 10px solid #424242;
}

.img-anim {
	width: 480px;
	height: 357px;
}

.quote {
	font-size: 1.1em;
	font-style: italic;
	padding-top: 150px;
}

.rol {
	font-family: "Arial Black", sans-serif;
	font-style: normal;
	font-weight: 700;
	text-decoration: underline;
	line-height: 10px;
	padding-top: 20px;
	}
	
.small {
	font-size: 0.8em;
}

.bold {
	font-weight: 700;
}

.cord {
	font-size: 13px;
}

/* 08. Modal overlay ================================================== */

/* Modal Page */
.modal-active {
  overflow: hidden;
  display: block !important;
  visibility: visible !important;
}

/*
.modal-active, .modal-page {
  visibility: visible;
}
*/

.modal-page {
  position: fixed;
  top: 0;
  left: 0;

	display: none;
  visibility: hidden;
  opacity: 0.99; /* fade in: set to 0 */
  z-index: 99999; /* above white frame */

  width: 100%;
  height: 100%;

  background-color: #fff;
/*   border: 15px solid #fff; */
  
  -webkit-transition: opacity 0.3s cubic-bezier(0.712, 0.0376, 0.392, 1);
  -moz-transition: opacity 0.3s cubic-bezier(0.712, 0.0376, 0.392, 1);
  -o-transition: opacity 0.3s cubic-bezier(0.712, 0.0376, 0.392, 1);
  -ms-transition: opacity 0.3s cubic-bezier(0.712, 0.0376, 0.392, 1);
  transition: opacity 0.3s cubic-bezier(0.712, 0.0376, 0.392, 1);
}

.modal-loading {
  display: block;
  opacity: 0.9;
}

.modal-loaded {
  opacity: 1;
}

.modal-spinner {
  position: absolute;
  top: 50%;
  left: 75px;
}

.modal-inner {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

/*
  overflow-x: hidden;
  overflow-y: auto;
*/
  -webkit-overflow-scrolling: touch;
}

.modal-vertical-center:before, .modal-vertical-center video {
	display: inline-block; 
	vertical-align: middle;
}

.modal-vertical-center:before {
	content: " ";
	height: 100%;
}

.modal-content {
  padding: 30px 20px;
  margin-bottom: 50px;
}

.modal-close {
	display: none;
  position: relative;
  top: 30px;
  right: 30px;
  text-align: right;
	z-index: 10000;
  -webkit-transition: color 0.1s linear;
  -moz-transition: color 0.1s linear;
  -o-transition: color 0.1s linear;
  -ms-transition: color 0.1s linear;
  transition: color 0.1s linear;
}

.button-close {
	background-color: transparent;
	text-indent: 0px;
	border: 2px solid #fff;
	display: inline-block;
	color: #fff;
	font-family: Arial;
	font-size: 24px;
	font-weight: bold;
	height: 32px;
	line-height: 29px;
	width: 32px;
	text-decoration: none;
	text-align: center;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
  border-radius: 20px;
}

.button-close:hover {
  color: #fff;
  border-color: #fff;
  border-radius: 20px;
}

/*  videojs */

.videocontent {
	width: 80%;
/* 	max-width:640px; */
}

.video-js {
	padding-top: 56.25%;
}

.video-js .vjs-tech {
/* 	margin: 15px; */
	border: 15px solid #fff;
/* 	box-sizing: content-box; */
/* 	padding: 15px; */
}

.vjs-fullscreen {
	padding-top: 0px;
}

.video-js.vjs-fullscreen {
/* 	position: relative; */
/*   right: 15px; */
/*
  position: fixed;
  overflow: hidden;
*/
/*   z-index: 1000; */
/*
  bottom: 15px;
  top: 15px;
  left: 15px;
*/
}

.vjs-default-skin .vjs-control-bar {
  /* Place control bar at the bottom of the player box/video. 
     If you want more margin below the control bar, add more height. */
  bottom: 15px;
  /* Use left/right to stretch to 100% width of player div */
  left: 15px;
  right: 15px;
  /* Height includes any margin you want above or below control items */
  background-color: #333;
  background-color: rgba(51, 51, 51, 0.7);
}

.vjs-default-skin .vjs-volume-level {
  background-color: #666;
}

.vjs-default-skin .vjs-play-progress {
  background: #666;
}

 /* remove full screen button */
.vjs-fullscreen-control {
	display: none; 
}

.vjs-default-skin .vjs-volume-control {
	margin-right: 20px;
}

/* 09. Media queries ================================================== */

@media only screen 
and (max-width: 767px) { /* tablets and smaller */

	#logo {
		display: none;
	}

}

@media only screen 
and (min-width: 320px) 
and (max-width: 479px) { /* phone portrait mode */

	#head-wrap {
		height: 360px;
		margin-top: -160px !important; /* Half the height */
		margin-left: -143px !important; /* Half the width */
		width: 90%;
	}
	
	body {
		font-size: 18px;
		line-height: 1.3em;
	}
	
	#home {
		background-attachment: inherit;
	}
	
	#home h1 {
		font-size: 3em;
		margin-bottom: 0.2em;
	}

	#home p {
		font-size: 1.3em;
		margin-bottom: 1em;
	}
	
	.trailer {
		width: 115px;
	}

	#down_button a {
		position: absolute;
		width: 50px !important;
		height: 50px !important;
		bottom: 10%;
		left: 55%;
	}

	#social_media {
	  margin-bottom: 15px;
	  margin-right: 20px;
	}
	
	nav div.row {
		max-width: 100%;
	}
	
	nav a {
		font-size: 0.9em !important;
	}
	
	nav ul li {
		padding: 0 4px;
	}
	
	nav ul {
		margin-right: 0;
	}
	
	#about {
		padding: 150px 0 10px;
	}
	
	#credits {
		padding-top: 170px;
	}
	
	.quote {
		padding: 20px 0 30px;
	}
	
	.img-anim {
		width: 240px;
		height: 178px; /* half size */
		background-size: 220px; /* = minus borders */
	}
}

@media only screen 
and (min-width: 480px) 
and (max-width: 767px) { /* phone landscape mode */

	#head-wrap {
/* 		height: 360px; */
		margin-top: -160px !important; /* Half the height */
		margin-left: -217px !important; /* Half the width */
		width: 90%;
	}
	
	body {
		font-size: 18px;
		line-height: 1.3em;
	}

	#home {
		background-attachment: inherit;
	}
		
	#home h1 {
		font-size: 2.4em;
		margin-bottom: 0.4em;
		margin-top: 1.2em;
	}

	#home p {
		font-size: 1.5em;
		margin-bottom: 1.1em;
	}
	
	.trailer {
		width: 115px;
	}
	
	#down_button a {
		position: absolute;
		width: 50px !important;
		height: 50px !important;
		bottom: 10%;
		left: 53%;
	}
	
	#social_media {
	  margin-bottom: 15px;
	  margin-right: 20px;
	}
	
	nav div.row {
		max-width: 100%;
	}
	
	nav a {
		font-size: 1.1em !important;
	}

	nav ul li {
		padding: 0 10px;
	}
	
	nav ul {
		margin-right: 0;
	}
	
	#about {
		padding: 150px 0 10px;
	}
	
	#credits {
		padding-top: 170px;
	}
	
	.quote {
		padding: 20px 0 30px;
	}
	
	.img-anim {
		width: auto;
		height: 357px;
		background-size: 480px;
	}
}

@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: portrait) { /* tablet portrait mode */

	#head-wrap {
		margin-top: -300px !important; /* Half the height */
/* 		margin-left: -217px !important; /* Half the width */ 
		width: 90%;
	}
	
	body {
		font-size: 18px;
/* 		line-height: 1.3em; */
	}

	#home {
		background-attachment: inherit;
	}
	
	#home h1 {
		margin-bottom: 1.5em;
	}

	#home p {
		font-size: 2em;
		margin-bottom: 3.5em;
	}
	
	.trailer {
		width: 140px;
	}
	
	nav ul li {
		padding: 0 10px;
	}
	
	nav ul {
		margin-right: 0;
	}
	
	#about .history { /* anim1 */
		margin-left: 0;
	}

	#about .junk { /* anim2 */
		margin-left: 34%;
	}

	#contact .row .four.columns {
		width: auto;
	}

	#contact .row .six.columns {
		width: 65%;
	}

}

@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: landscape) { /* tablet landscape mode */

/*
	#about .row .six.columns {
		width: 60%;
	}
*/

	#home {
		background-attachment: inherit;
	}
	
	#about .junk { /* anim2 */
		margin-left: 15%;
	}

}

@media only screen 
and (min-width: 1024px) 
and (max-width: 1159px) {

		height: 400px;
		margin-top: -200px; /* Half the height */
		margin-left: -250px; /* Half the width */
	} 
}

@media only screen 
and (min-width: 1160px) {

	#head-wrap {
		height: 500px;
		margin-top: -250px; /* Half the height */
		margin-left: -350px; /* Half the width */
	}
}


/* 10. KEY FRAMES FADE IN ================================================== */

@-webkit-keyframes Anim { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes Anim { from { opacity:0; } to { opacity:1; } }
@keyframes Anim { from { opacity:0; } to { opacity:1; } }
 
.fade-it {
  -webkit-animation:Anim ease-in 1;
  -moz-animation:Anim ease-in 1;
  animation:Anim ease-in 1;
  opacity: 0.7;
  filter: alpha(opacity=70);
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
}

.fade-it {
	-webkit-animation-delay: 0.3s;
	-moz-animation-delay: 0.3s;
	animation-delay: 0.3s;
/*	transform: translateZ(0);   kick in hw accell? -> no effect */
}

.hw-accell-fix {
	-webkit-transform: translate3d(0,0,0); /* fixes high cpu usage : hw accell */
	-webkit-backface-visibility: hidden;
}

/* pulse animation ================================================== */

.pulse{
	animation-name: pulse;
	-webkit-animation-name: pulse;	

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes pulse {
	0% {
		transform: scale(0.9);
		opacity: 0.7;		
	}
	50% {
		transform: scale(1);
		opacity: 1;	
	}	
	100% {
		transform: scale(0.9);
		opacity: 0.7;	
	}			
}

@-webkit-keyframes pulse {
	0% {
		-webkit-transform: scale(0.95);
		opacity: 0.7;		
	}
	50% {
		-webkit-transform: scale(1);
		opacity: 1;	
	}	
	100% {
		-webkit-transform: scale(0.95);
		opacity: 0.7;	
	}			
}