/*
====================================================

* 	[Master Stylesheet]
	
	Theme Name :  
	Version    :  
	Author     :  
	Author URI :  

====================================================

	TOC
	
	1. PRIMARY STYLES
	2. COMMONS FOR PAGE DESIGN
		JQUERY LIGHT BOX
	3. MENU
		MIDDLE AREA
		BOTTOM AREA
		DROPDOWN MENU STYLING
		DROPDOWN SUBMENU
		DROPDOWN HOVER 
	4. SLIDER
	5. STORY AREA
	6. REMAINING TIME
	7. WEDDING DETAILS AREA
	8. WEDDING CEREMONY
	9. CONTACT AREA
	10. VIEW GALLERY
	11. FOOTER

====================================================






/* ---------------------------------
1. PRIMARY STYLES
--------------------------------- */

html{ font-size: 100%; height: 100%; overflow-x: hidden;margin: 0px;  padding: 0px; touch-action: manipulation; }


body{ font-size: 1.6vw; font-family: 'Josefin Sans', serif; width: 100%; height: 100%; margin: 0; font-weight: 400;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; word-wrap: break-word; 
	color: #333; }

h1, h2, h3, h4, h5, h6, p, a, ul, span, li, img, inpot, button{ margin: 0; padding: 0; }


h1,h2,h3,h4,h5,h6{ line-height: 1.5vw; font-weight: inherit; }

h1,h2,h3{ font-family: 'Cookie', cursive; }

p{ line-height: 2.5vw; font-size: 2.5vw; font-weight: 400; color: #555; }

h1{ font-size: 5.5vw; line-height: 1vw; }
h2{ font-size: 8vw; line-height: 0.75vw; }
h3{ font-size: 3.5vw; }
h4{ font-size: 2.0vw; }
h5{ font-size: 1.2vw;}
h6{ font-size: .9vw; letter-spacing: 1vw; }

a, button{ display: inline-block; text-decoration: none; color: inherit; transition: all .3s; line-height: 1.5vw; }

a:focus, a:active, a:hover,
button:focus, button:active, button:hover,
/*color: rgba(74, 112, 35, 1); */
a b.light-color:hover{ text-decoration: none; color:rgba(74, 112, 35, 1); }

a.clickme{text-decoration: none; color:rgba(74, 112, 35, 1);}
a.clickme:hover{color: inherit; }

.linki:link{
	color: #292b2c;
}
.linki:visited{
	color: #292b2c;
}
.linki:hover{
	color: rgba(74, 112, 35, 1);
}

b{ font-weight: 500; }

img{ width: 100%; }


li{ list-style: none; display: inline-block; }

ul#mine {list-style-type: disc; padding-top: 1vw; padding-left: 1.5vw; width: 85%; color: #555;}

ul#mine li { list-style: disc; display: list-item; margin-left: 1vw; padding-bottom: 1vw}

span{ display: inline-block; }

button{ outline: 0; border: 0; background: none; cursor: pointer; }

b.light-color{ color: #444; }

.icon{ font-size: 2vw; display: inline-block; line-height: inherit; }

.iconStar{ font-size: 1vw; }

.icon-ri{
	fill: #2b542c;}

[class^="icon-"]:before, [class*=" icon-"]:before{ line-height: inherit; }

/* ---------------------------------
2. COMMONS FOR PAGE DESIGN
--------------------------------- */

.btn{ padding: 15px 30px; border-radius: 1px; letter-spacing: 2px;
	border: 1px solid rgba(74, 112, 35, 1); background: rgba(74, 112, 35, 1); color: #fff; }

.btn:hover{ color: rgba(74, 112, 35, 1); background: none; }

.btn-2{ font-size: .9em; padding: 15px 30px; border-radius: 1px; letter-spacing: 2px;
	border: 1px solid rgba(74, 112, 35, 1); }

.btn-2:hover{ background: rgba(74, 112, 35, 1); color: #fff; }

.border-btn{ font-size: .9em; padding-bottom: 5px; background: none; color: inherit; border: 0;
	position: relative; overflow: hidden; }

.border-btn:after{ content:''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
	transition: all .3s; background: rgba(74, 112, 35, 1); }

.border-btn:before{ content:''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
	transform: translateX(-130%); transition: all .3s; background: rgba(74, 112, 35, 1); }

.border-btn:hover:after{ transform: translateX(130%); }

.border-btn:hover:before{ transform: translateX(0%); }


.section{ padding: 7vw 0 7vw; }

.section .heading{ padding-bottom: 3vw; }

.section .heading .icon{ font-size: 2vw; margin-top: 2vw; color: rgba(74, 112, 35, 1); }

.section .heading .icon.color-white{ color: #fff; }

.section .heading .heading-bottom{ margin-top: 2vw; display: inline-block; width: 50%; height: 8vw;
	line-height: 3.5vw; position: relative; }

.section .heading .heading-bottom .icon{ position: absolute; left: 50%; top: 50%; margin: -9px 0 0 -9px; }

.section .heading .heading-bottom:after{ content:''; position: absolute; left: 0; top: 50%; margin-top: -.5px;
	height: 1px; width: 33%; background: #aaa; }

.section .heading .heading-bottom:before{ content:''; position: absolute; right: 0; top: 50%; margin-top: -.5px;
	height: 1px; width: 33%; background: #aaa; }

.section .margin-bottom{ margin-bottom: 30px; }

.section .subheading{padding-bottom: 1vw;}


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

.color-white{ color: #fff; }

.display-table{ display: table; height: 100%; width: 100%; }

.display-table-cell{ display: table-cell; vertical-align: middle; }




::-webkit-input-placeholder { font-size: .9em; letter-spacing: 1px; }

::-moz-placeholder { font-size: .9em; letter-spacing: 1px; }

:-ms-input-placeholder { font-size: .9em; letter-spacing: 1px; }

:-moz-placeholder { font-size: .9em; letter-spacing: 1px; }



/* JQUERY LIGHT BOX */

#flavorOverlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: none;
	background: rgba(0, 0, 0, 0.8); }

#flavorLightbox { display: none; }

#flavorLightbox > img { max-width: 90%; max-height: 90%; position: fixed; top: 50px; left: 50%;
  transform: translateX(-50%); z-index: 9999; }

#flavorLightboxClose { font-size: 32px; cursor: pointer; position: fixed; top: 30px; right: 30px;
  z-index: 666; color: #fff; }

.thumbnails { display: flex; flex-flow: row wrap; justify-content: center; z-index: 600;
  position: relative; cursor: pointer; position: absolute; bottom: 50px; width: 90%; }

.thumbnails img { height: 50px; margin: 1px; transition: .3s; }

.thumbnails img:hover { border: 2px solid #fff; }



/* ---------------------------------
3. MENU
--------------------------------- */

header{ background-color: rgba(55,55,55,0.5); position: fixed; left: 0; right: 0; top: 0px; z-index: 1000; font-size: .85vw;
	border-bottom: 2px solid rgba(255,255,255, .2); color: #fff;height: 4vw}


/* MIDDLE AREA */

head-icon{ font-size: 5vw; display: inline-block; line-height: inherit; }

header a{font-size: 1.5vw; }

header .nav{font-weight: bold; padding-left:2vw; font-size:1.5vw}
header .navInac{font-weight: bold; color: grey; padding-left:2vw; font-size:1.5vw}
#nave_hoch{font-size: 5vw; line-height: 0vw}

header .logo{ margin: 2vw 0 1vw; height: 2vw; }

header .logo img{ height: 1.5vw; width: auto; }
header .logo:hover{ color: #fff }
/* BOTTOM AREA */

header .main-menu{ font-weight: 500; float: right; margin: 0px 0vw; }

header .main-menu > li > a{ height: 2.5vw; line-height: 2vw; padding: 0 1vw; border: 0px solid transparent;
	border-radius: 2px; background: transparent; padding-top: 1vw; margin-right:0}

header .visible.main-menu{ display: block; }


/* DROPDOWN MENU STYLING */

header .main-menu li.drop-down{ position: relative; text-align: left; }

header .main-menu li.drop-down > ul.drop-down-menu{ display: none; position: absolute; top: 0.5vw; left: 0;
	min-width: 200px; box-shadow: 0px 3px 10px rgba(0,0,0,.3); background: #333; }

header .main-menu li.drop-down > ul.drop-down-menu li{ display: block; border-top: 1px solid #444; }

header .main-menu li.drop-down > ul.drop-down-menu li > a{ display: block; padding: 0.5vw 1vw; }

header .main-menu li.drop-down > ul.drop-down-inner li:first-child{ border-top: 0; }

header .main-menu li i{margin-left: 2vw;  }


/* DROPDOWN SUBMENU */

header .main-menu li.drop-down > ul.drop-down-inner{ top: 0; left: auto; left: 100%; }


/* DROPDOWN HOVER */

header .main-menu > li > a:hover,
header .main-menu li a.mouseover{ border-color: rgba(74, 112, 35, 1); }

header .main-menu li.drop-down a.mouseover + ul.drop-down-menu{ display: block;
	animation: full-opacity-anim .2s forwards; }

@keyframes full-opacity-anim{
	0%{ opacity: 0; }
	100%{ opacity: 1; }
}

/* NAV ICON */

.menu-nav-icon{ display: none; height: 1vw; width: 1vw; text-align: center; line-height: 4vw; cursor: pointer; font-size: 4vw;
	}

.invisible{visibility: hidden}

#navbar {}

.container{
	height: 100%;
	width:90%;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
.nonsticky {
  position: relative;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}


/* ---------------------------------
4. SLIDER - old-pic: (../../images/slider-1-1600x900.jpg
--------------------------------- */

.main-slider{ height: 50vw; width:100%; position: relative; z-index:1;
	background-image: url(../images/DSC_0850_small.JPG); background-size: 110%; color: #fff; background-repeat:no-repeat;}

.main-slider:after{ content:''; position: absolute; top: 0; bottom: 0; left: 0; right: 0;
	z-index: -1; background: rgba(0,0,0,.0); }

.slider-content .date{ margin: 2vw 0 0; }

.slider-content i{ line-height: 1vw; }

.slider-content i.small-icon{ font-size: 2.5vw; }

.slider-content .title i{ transform: translateY(5vw); font-size: 3vw; color: rgba(74, 112, 35, 1); }


/* ---------------------------------
5. STORY AREA - url(../../images/Background_Circle.png)
--------------------------------- */


.story-area{ position: relative; z-index: 1;  width: 20vw; height: 20vw; }

.story-area:after{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1;
	opacity: .8; background: whitesmoke;  box-shadow: 1vw 3vw 4vw rgba(55,55,55,1); }

.slider-area{ position: relative; z-index: 1;  width: 40vw; height: 25vw; margin: 10vw; padding: 5vw}

.slider-area:after{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1;
	opacity: .45; background:whitesmoke; }


p.longText {font-size: 1.75vw; line-height: 2.0vw; text-align: justify;   hyphens: auto;   -ms-hyphens: auto;
	-webkit-hyphens: auto;}

p.left{float:left; padding-right:1vw}

#ZEUGENANNOUNCE{
	padding-left:3vw;
	padding-right:3vw;
	padding-top:3.5vw;
	font-weight: bold;
	font-size: 2.5vw;
	line-height: 2.6vw;
}
/* ---------------------------------
6. REMAINING TIME
--------------------------------- */


.filler {height: 27vw}

.hhof-area{ position: relative; z-index: 1;
	background-image: url(../images/hoerhof.jpg); background-size: cover; color: #fff; }

.hhof-area:after{ content:''; position: absolute; top: 0; bottom: 0; left: 0; right: 0;
	z-index: -1; background: rgba(0,0,0,.3); }

.rdea-area{ position: relative; z-index: 1;
	background-image: url(../images/Rdea-1200x418.png); background-size: cover; color: #fff; }

.rdea-area:after{ content:''; position: absolute; top: 0; bottom: 0; left: 0; right: 0;
	z-index: -1; background: rgba(0,0,0,.3); }

.counter-area:after{ content:''; position: absolute; top: 0; bottom: 0; left: 0; right: 0;
	z-index: -1; background: rgba(0,0,0,.3); }

.remaining-time .time-sec{ position: relative; display: inline-block; margin: 0 20px; margin-bottom: 30px;
	height: 120px; width: 120px; padding-top: 25px; border-radius: 100px; border: 1px solid #fff; }

.remaining-time .time-sec .title{ font-size: 3vw; line-height: 1vw; display: block; }

#largeHead{font-size: 4.5vw}

/* ---------------------------------
7. WEDDING DETAILS AREA
--------------------------------- */

.wedding-details{ overflow: hidden; position: relative; }

.wedding-details:after{ content:''; position: absolute; top: 0; bottom: 0; left: 50%; margin-left: -.5px;
	width: 1px; background: #ccc; }

.w-detail{ width: 50%; padding: 0 50px; margin-bottom: 30px; position: relative; clear: both; margin-top: -40px; }

.w-detail:first-child{ margin-top: 0; }

.w-detail:last-child{ margin-bottom: 0; }

.w-detail:after{ content:''; position: absolute; top: 0; height: 18px; width: 18px; border-radius: 20px;
	z-index: 1; border: 1px solid #aaa; background: #fff; }

.w-detail.right{ text-align: left;  float: right;  padding-bottom: 2vw;}

.w-detail.right:after{ left: 0; margin-left: -9px; }

.w-detail.left{ text-align: right;  float: left;  padding-bottom: 2vw; }

.w-detail.left:after{ right: 0; margin-right: -9px; }

.w-detail .title{ margin: 10px 0; }

.w-detail .icon{ font-size: 2.5vw; line-height: 1vw; color: rgba(74, 112, 35, 1); }
h4.programTitle { font-size: 2.5vw; line-height: 2.45vw}
p.programSub {font-style: italic; font-size: 2.0vw;line-height: 2.1vw;}
p.program {font-size: 2.1vw; line-height: 2.1vw;}


/* ---------------------------------
8. WEDDING CEREMONY
--------------------------------- */

.ceremony-area:after{ content:''; position: absolute; top: 0; bottom: 0; left: 0; right: 0;
	z-index: -1; background: rgba(0,0,0,.3); }

.ceremony .desc{ margin-bottom: 15px; color: #fff;  }

.location-area{ position: relative; z-index: 1;
	background-image: url(../images/hex4.jpg); background-size: cover; color: #fff; }

.con-area{ position: relative; z-index: 1;
	background-image: url(../images/DosenFon.jpg); background-size: cover; color: #fff; }

/* ---------------------------------
9. CONTACT AREA
--------------------------------- */

.contact-area{ position: relative; overflow: hidden; padding-top: 3vw; box-shadow-top: 1px 10px 15px rgba(0,0,0,.4); }

.contact-area .contact-wrapper{ width: 50%; height: 100%; padding-right: 2vw}
.contact-area .imgWall {  float: left; display: grid; align-content: center; }

.map-area{ height: 650px; width: 100%; position: relative; top: 0; bottom: 0; right: 0; } /*{ width: 50%; position: absolute; top: 0; bottom: 0; right: 0; }*/
/*.map-area {  width: 50%; position: absolute; top: 0; bottom: 0; right: 0; }*/
.map-area2{ height: 650px; width: 100%; position: relative; top: 0; bottom: 0; right: 0; }

.contact-area .imgWall .imageSide { width: 100% ;} /* padding-top:1vw}*/
.contact-area .imgWall img{width: 100%; float:left; align-self: center}

.contact-area h3 { font-size: 5vw; line-height: 4.5vw ; padding: 1vw}

.contact-area h5 { font-size: 2.6vw; line-height: 2.6vw }

.gridTile{
	width: 100%;
	display: grid;
	grid-gap: 5vw;
	grid-template-rows: 100% auto;
}
.rowTile{
	grid-template-columns: 50% auto;
	grid-gap: 3vw;
	padding-bottom: 2vw;
	display: grid;
	align-content: center}

.textTile {width: 100%; text-wrap: normal}


.contact-area .phone{ margin: 2.5vw 0; font-size: 4vw; color: inherit } /* rgba(74, 112, 35, 1); }*/


/* ---------------------------------
10. VIEW GALLERY
--------------------------------- */

.galery-area .gallery-btn{ margin-top: 30px; }



/* ---------------------------------
11. FOOTER
--------------------------------- */

footer{ position: relative; z-index: 1; padding-top: 20px; }

footer:after{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1;
	opacity: .8; } /* background: url(../../images/Background_Circle.png); }*/

footer ul > li > a{ padding: 10px 15px; }

footer .logo-wrapper .icon{ color: rgba(74, 112, 35, 1); }

footer .logo{ display: block; height: 50px; }

footer .logo img{ height: 100%; width: auto; }

footer .newsletter{ margin: 20px 0; }

footer .newsletter .title{ margin: 5px 0; }

footer .newsletter .email-area{ position: relative; width: 400px; height: 55px; margin: 20px auto; }

footer .email-area .email-input{ position: absolute; top: 0; bottom: 0; left: 0; width: 100%; border: 0; outline: 0; 
	border-radius: 100px; padding: 0 70px 0 25px; transition: all .2s; box-shadow: 1px 10px 30px rgba(0,0,0,.2); }

footer .email-area .email-input:focus{ box-shadow: 1px 15px 30px rgba(0,0,0,.3); }

footer .email-area .submit-btn{ position: absolute; right: 0; height: 55px; width: 55px; line-height: 2vw;
	border-radius: 100px; background: #E55D73; color: #fff; }

footer .email-area .submit-btn:hover{ background: #000; color: #E55D73; }


footer .copyright{ padding: 20px 0 30px; }


/*
Smooth scroll
 */
html {
	scroll-behavior: smooth;
}

.longDescTit {}