/**
  * Import web fonts
  */
/*@import url(https://db.onlinewebfonts.com/c/d4e46ba111a69027cb3574ff9cfe88de?family=Bell+Gothic);
@import url(https://db.onlinewebfonts.com/c/fd34dd718ec332632d731508a05c5ea6?family=Bell+Gothic); */
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);
/* 
@import url(https://db.onlinewebfonts.com/c/8297bbd55f7df6674572fd9200f58ac4?family=BellGothicW01-Light);
 */

@font-face {font-family: "BellGothicW01-Light";
    src: url("https://db.onlinewebfonts.com/t/8297bbd55f7df6674572fd9200f58ac4.eot");
    src: url("/https:/db.onlinewebfonts.com/t/8297bbd55f7df6674572fd9200f58ac4.eot?#iefix") format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/8297bbd55f7df6674572fd9200f58ac4.woff2") format("woff2"),
    url("https://db.onlinewebfonts.com/t/8297bbd55f7df6674572fd9200f58ac4.woff") format("woff"),
    url("/https:/db.onlinewebfonts.com/t/8297bbd55f7df6674572fd9200f58ac4.ttf") format("truetype"),
    url("https://db.onlinewebfonts.com/t/8297bbd55f7df6674572fd9200f58ac4.svg#BellGothicW01-Light") format("svg");
}
	
/**
  * Set page font
  */
html {
	/* font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif; */
	/* font-family: 'Bell Gothic', serif; */
	font-family: 'Bell Gothic', 'BellGothicW01-Light', 'Source Sans Pro', Arial, Helvetica, sans-serif;
}

/**
  * Image alignment
  */
img {
	vertical-align: top;  	
	display: block;
  	margin-left: auto;
  	margin-right: auto;
}

/**
  * Fingerheart image
  */
@media screen and (min-width: 1067px) {
img.fingerheart {
    width: 640px;
  }
}

@media screen and (max-width: 1066px) {
img.fingerheart {
    width: 60vw;
  }
}


//**
  * Preview images
  */
img.preview {
  	margin-left: 0;
  	margin-right: 0;
  	padding: 0;
	border: 0;
	height: 100%;
	width: 100%;
}

/* 
@media screen and (min-width: 401px) {
img.preview {
    width: 400px;
  }
}

@media screen and (max-width: 400px) {
img.preview {
    width: 100vw;
  }
}
 */


/**
 * Preview hyperlinks in iframes
 */
iframe.preview {
	z-index: 10;
	position: absolute;
	display:none;
}

@media screen and (min-width: 801px) {
iframe.preview {
    width: 400px;
    height: 600px;
  }
}

@media screen and (max-width: 800px) {
iframe.preview {
    width: 50vw;
    height: 75vw;
  }
}

iframe.info {
	z-index: 10;
	position: absolute;
/* 
	bottom: -10px;
 */
	display:none;
}

@media screen and (min-width: 601px) {
iframe.info {
    width: 450px;
    height: 300px;
  }
}

@media screen and (max-width: 600px) {
iframe.info {
    width: 75vw;
    height: 70vw;
  }
}

iframe.premap {
	z-index: 10;
	position: absolute;
	display:none;
}

@media screen and (min-width: 800px) {
iframe.premap {
    width: 600px;
    height: 600px;
  }
}

@media screen and (max-width: 799px) {
iframe.premap {
    width: 75vw;
    height: 75vw;
  }
}

/**
  * Google map
  */
@media screen and (min-width: 800px) {
iframe.map {
/* 
    width: 800px;
 */
    width: 100vw;
    height: 400px;
  }
}

@media screen and (max-width: 799px) {
iframe.map {
    width: 100vw;
    height: 50vw;
  }
}

/* 
iframe.map:hover {
	width: 100vmin;
	height: 100vmin;
}
 */


.nav {
	margin: auto;
	text-align:center;
}

/**
  * Standard text
  */
.text {
	color: #404040;
	font-weight: 300;
	text-align: center;
	margin: auto;
	max-width: 800px;
	padding-top: 0px;
	padding-bottom: 10px;
	padding-left: 10%;
	padding-right: 10%;
}

@media screen and (min-width: 700px) {
  .text {
    font-size: 18px;
  }
}

@media screen and (max-width: 699px) {
  .text {
    font-size: 16px;
  }
}

/**
  * Schedule
  */
.schedule {
	color: #404040;
	font-weight: 300;
	text-align: left;
	margin: auto;
	max-width: 800px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 10%;
	padding-right: 10%;
	text-indent: 0;
}

@media screen and (min-width: 700px) {
  .schedule {
    font-size: 18px;
  }
}

@media screen and (max-width: 699px) {
  .schedule {
    font-size: 4vw;
  }
}

.schedule.indent {
	text-indent: 2.9em;
}


/**
  * Names
  */
.names {
	/* font-size: 72px; */
	color: #c44e24;
	font-weight: 300;
	text-align: center;
	margin: auto;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	text-transform: uppercase;
}

@media screen and (min-width: 801px) {
  .names {
    font-size: 72px;
  }
}

@media screen and (max-width: 800px) {
  .names {
    font-size: 9vw;
  }
}

/**
  * Countdown timer
  */
.timer {
	text-align: center;
	margin: auto;
	color: #f8bca1;
	text-align: center;
}

@media screen and (min-width: 801px) {
  .timer {
    font-size: 48px;
  }
}

@media screen and (max-width: 800px) {
  .timer {
    font-size: 6vw;
  }
}

.timercaption {
	text-align: center;
	margin: auto;
	color: #c0c0c0;
	font-size: 12px;
}

td {
	padding: 5px;
	padding-top: 0;
	padding-bottom: 0;
}

/**
  * Main headings
  */
.heading {
	color: #ed6a4c;
	font-weight: 400;
	text-align: center;
	padding-top: 40px;
	padding-bottom: 0px;
	text-transform: uppercase;
/* 
	padding-left: 30%;
	padding-right: 30%;
 */
}

@media screen and (min-width: 801px) {
  .heading {
    font-size: 40px;
  }
}

@media screen and (min-width:601px) and (max-width: 800px) {
  .heading {
    font-size: 4vw;
  }
}

@media screen and (max-width: 600px) {
  .heading {
    font-size: 20px;
  }
}

/**
  * Sub headings
  */
.subheading {
	color: #404040;
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 10px;
	text-transform: uppercase;
}

/**
  * Parallax non see-through window
  */
div.main {
	background-color:rgba(255,255,255,0.9);
	padding-top: 10px;
	padding-bottom: 10px;
}

/**
  * Complete non-see-through window
  */
div.plain {
	background-color:rgba(255,255,255,1.0);
	padding-top: 10px;
	padding-bottom: 10px;
}

div.preview {
	padding-left: 0;
	padding-right: 0;
	font-weight: 400;
	text-align: center;
}
  
/**
  * Parallax non see-through window
  */
div.fingerheart {
	background-color:rgba(255,255,255,0.9);
	padding-top: 0px;
	padding-bottom: 0px;
}
  
/**
  * Parallax see-through window
  */
div.window {
	background-color:rgba(255,255,255,0.0);
}

@media screen and (min-width: 801px) {
  div.window {
    height: 500px;
  }
}

@media screen and (max-width: 800px) {
  div.window {
    height: 67vw;
  }
}  

div.caption {
/* 
	background-color:rgba(255,255,255,0.9);
  	background-color: rgb(0, 0, 0);
 */
  	background-color: rgba(0, 0, 0, 0.5);
  	color: #f1f1f1;
  	width: 100%;
  	padding-top: 10px;
  	padding-bottom: 10px;
  	text-align: center;
}

div.bottom {
	position: absolute; 
	bottom: 0;
}

/**
  * colored line
  */
div.bar {
	height: 1px;
	background-color: #ed6a4c;
}

/**
  * Do not high-light links
  */
a {
  /* text-decoration: none; */
  color: inherit;
  cursor: pointer;
}

a:hover {
	color: #ed6a4c;
}

/**
  * Specify font weights
  */
.regular {
	font-weight: 400;
}

.light {
	font-weight: 300; 
}

.bold {
	font-weight: bold;
}

.dimm-color {
	color: #c0c0c0;
}

.muw-color {
	color: #c44e24;
}

.coral-color {
	color: #ed6a4c;
}

.apricot-color {
	color: #f8bca1;
}

.foreground-color {
	color: #404040;
}

.background-color {
	color: #ffffff;
}

.left {
	text-align; left;
}

/**
  * Default background
  */
body {
	background-color: #ffffff;
	margin: 0;

/* 
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
 */
}


/**
  * Fixed background image
  * (this workaround also works on mobile devices!
  */
body.main::before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url("villa_haar_spring_1512.jpg") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body.hzs::before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url("hzs.jpg") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body.vh1::before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url("villa_haar_600.jpg") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body.vh2::before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url("vh2_600.jpg") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body.vh3::before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url("vh3_600.jpg") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


/**
   * Parallax effect
   */
.parallax {
  	/* The image used */
	background-image: url("villa_haar_2016.jpg");

	/* Set a specific height */
	/* min-height: 300px; */

	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

}

/**
  * Blurring of background-image (not yet used)
  */
.blur {
  	filter: blur(8px);
  	-webkit-filter: blur(8px);
  	height: 100%
}

/**
  * Hearts at cursor position
  */
.particle-hearts {
	position: absolute;
	display: block;
    pointer-events: none;
    z-index: 10000000;
    width: 80px;
    height: 80px;
    will-change: transform;
    background-size: contain;
    background-image: url("fingerheart_80.png");
}


/**
  * Responsive top navigation menu
  */
.topnav {
	overflow: hidden;
	background-color: #ffffff;
	color: #404040;
	text-decoration: none;
	top: 0;
	width: 100%;
}

.topnav a {
	float: left;
	display: block;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 14px;
	color: #404040;
	text-transform: uppercase;
}

.topnav a:hover {
	color: #ed6a4c;
}

.topnav .active {
	color: #c0c0c0;
}

.topnav .icon {
	display: none;
	color: #404040;
	font-size: 20px;
	padding-top: 4px;
}

@media screen and (max-width: 600px) {
	.topnav a:not(:first-child) {display: none;}
	.topnav a.icon {
		float: right;
    	display: block;
    }
}

@media screen and (max-width: 600px) {
	.topnav.responsive .icon {
    	position: absolute;
    	right: 0;
    	top: 0;
    }
	.topnav.responsive a {
    	float: none;
    	display: block;
    	text-align: left;
    }
}

/**
  * Responsive top navigation menu
  */
.navbar {
	overflow: hidden;
	background-color: #ffffff;  
	color: #404040;
	text-decoration: none;
	position: fixed;
	bottom: 0px;
	width: 100%;
}

.navbar a {
	float: left;
	display: block;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 14px;
	color: #404040;
	text-transform: uppercase;
}

.navbar a:hover {
	color: #ed6a4c;
}

.navbar .active {
	color: #c0c0c0;
}

.navbar .icon {
	display: none;
	color: #404040;
	font-size: 20px;
	padding-bottom: 6px;
}

@media screen and (max-width: 600px) {
	.navbar a:not(:first-child) {display: none;}
	.navbar a.icon {
    	float: right;
    	display: block;
	}
}

@media screen and (max-width: 600px) {
	.navbar.responsive .icon {
    	position: absolute;
    	right: 0;
    	bottom:0;
		z-index: 15;#
	}
	.navbar.responsive a {
    	float: none;
    	display: block;
    	text-align: left;
		z-index: 15;
	}
}

/**
 * Ticker stuff
 */

@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.ticker-wrap {
  position: fixed;
  top: 50;
  width: 100%;
  overflow: hidden;
/* 
  height: 3rem;
 */
  background-color: rgba(0, 0, 0, 0.5);
  padding-left: 100%;
  box-sizing: content-box;
}

@media screen and (min-width: 801px) {
  .ticker-wrap .ticker .ticker__item {
    font-size: 2rem;
    line-height: 3rem;
  }
}

@media screen and (max-width: 800px) {
    .ticker-wrap .ticker .ticker__item  {
    font-size: 4vw;
    line-height: 6vw;
  }
}


.ticker-wrap .ticker {
  display: inline-block;
  /*height: 2rem;
  line-height: 3rem;*/
  white-space: nowrap;
  padding-right: 100%;
  box-sizing: content-box;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: 30s;
  animation-duration: 30s;
}

.ticker-wrap .ticker__item {
  display: inline-block;
  padding: 0 2rem;
/*   font-size: 2rem; */
  color: #ed6a4c;
}