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

* 	[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
--------------------------------- */

/*font-family: 'Courgette', cursive;*/
/*font-family: 'Quando', serif;*/
/*font-family: 'Kaushan Script', cursive;*/

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


body{ font-size: 16px;
  /*font-family:'Quando', serif; */
  /*font-family: "Bellefair", serif;*/
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-style: normal;
  width: 100%; height: 100%; margin: 0;
	-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, input, button{ margin: 0; padding: 0; }

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

h1,h2,h3{
  /*font-family: 'Courgette', cursive;*/
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  /*text-transform: uppercase;*/
  /*font-style: italic;*/
  /*transform: skew(-15deg);*/
}

p {
  line-height: 1.6;
  font-size: 1.4em;
  font-weight: 500;
  color: #555;
}

h1{ font-size: 5em; line-height: 1; }

h2 {
  font-size: 3.5em;
  line-height: 1.1;
  display: flex;
  justify-content: center;
  align-items: flex-end;

  span {
    display: inline-block;
    min-height: 44px;
    align-content: flex-end;
  }
}


h3{ font-size: 2.5em; }
h4{ font-size: 1.5em; }
h5{ font-size: 1.2em; }
h6{ font-size: .9em; letter-spacing: 1px; }

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

a:focus, a:active, a:hover,
button:focus, button:active, button:hover,
a b.light-color:hover{ text-decoration: none; color: #4bc196; }

b{ font-weight: 500; }

img{ width: 100%; }

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

span{ display: inline-block; }

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

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

.icon{ font-size: 1.1em; display: inline-block; line-height: inherit; }

[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 #4bc196; background: #4bc196; color: #fff; }

.btn:hover{ color: #4bc196; background: none; }

.btn-2{ font-size: .9em; padding: 15px 30px; border-radius: 1px; letter-spacing: 2px;
	border: 1px solid #4bc196; }

.btn-2:hover{ background: #4bc196; 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: #4bc196; }

.border-btn:before{ content:''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
	transform: translateX(-130%); transition: all .3s; background: #4bc196; }

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

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


.section{ padding: 80px 0 70px; }

.section .heading{ padding-bottom: 40px; }

.section .heading .icon{ font-size: 18px; margin-top: 20px; color: #4bc196; }

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

.section .heading .heading-bottom{ margin-top: 20px; display: inline-block; width: 160px; height: 20px;
	line-height: 20px; 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: 60px; background: #aaa; }

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

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



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

.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 {
  position: absolute;
  left: 0;
  right: 0;
  top: 20px;
  z-index: 1000;
  font-size: 1.00em;
  font-weight: bold;
  /*border-bottom: 1px solid rgba(255, 255, 255, .2);*/
  color: #fff;
}


/* MIDDLE AREA */

header .logo{ margin: 5px 0 20px; height: 40px; }

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


/* BOTTOM AREA */

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

header .main-menu > li > a{ height: 50px; line-height: 46px; padding: 0 15px; border: 2px solid transparent;
	border-radius: 2px; background: transparent; }

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: 50px; 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: 15px 20px; }

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

header .main-menu li i{margin-left: 10px; }


/* 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: #4bc196; }

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: 60px; width: 50px; text-align: center; line-height: 60px; cursor: pointer;
	font-size: 1.8em; }



/* ---------------------------------
4. SLIDER
--------------------------------- */

.main-slider{ height: 100vh; position: relative; z-index: 1;
  background: url(images-v1/background/landing_D.jpg) no-repeat center top;
  background-size: cover;
  color: #fff;
}

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

.slider-content .date{ margin: 10px 0 0; }

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

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

.slider-content .title i{ transform: translateY(10px); font-size: .8em; color: #4bc196; }


/* ---------------------------------
5. STORY AREA
--------------------------------- */

/*.story-area{ position: relative; z-index: 1; }*/

/*.story-area:after{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1;*/
/*	opacity: .03; background: url(images-v1/background/background_ornamenty.jpg); background-size: 350px}*/


/* ---------------------------------
5. CONTACT-2 AREA
--------------------------------- */

.contact-area-2{ position: relative; z-index: 1; }

.contact-area-2:after{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1;
  opacity: .03; background: url(images-v1/background/background_ornamenty.jpg); background-size: 350px }



/* ---------------------------------
5. RSVP AREA
--------------------------------- */

/*.rsvp-area{ position: relative; z-index: 1; }*/

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


.contact-form{ padding: 50px 40px; border-radius: 5px; box-shadow: 1px 15px 40px rgba(0,0,0,.3);
  background: #fff; }


.contact-form .pre-title{ margin: 10px 0; color: #4bc196; }

.contact-form input,
.contact-form select,
.contact-form label{ display: block; width: 100%; }

.contact-form .margin-bottom{ margin-bottom: 20px; }

.contact-form input,
.contact-form select{ line-height: 45px; height: 45px; padding: 0 15px; }

.contact-form .btn{ padding: 0px 30px; line-height: 43px; height: 45px; margin-top: 10px; border-radius: 2px; }

/* ---------------------------------
6. REMAINING TIME
--------------------------------- */

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

.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: 3em; line-height: 1; display: block; }



/* ---------------------------------
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; }

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

.w-detail.left{ text-align: right;  float: left; }

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

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

.w-detail .icon{ font-size: 3.5em; line-height: 1; color: #4bc196; }
.w-detail i { font-size: 3em; line-height: 1; color: #4bc196; }



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

.info-area{ position: relative; z-index: 1;
  background-image: url(images-v1/background/slider-1-1600x900.jpg); background-size: cover; color: #fff; }

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

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

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

.gifts-area{ position: relative; z-index: 1;
  background: url(images-v1/background/gifts_bg2.jpeg) no-repeat center center;
  background-size: cover;
  color: #fff;
}

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

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

/* ------------------ */

.dresscode-area{ position: relative; z-index: 1;
  background: url(images-v1/background/dresscode_bg.jpg) no-repeat center center;
  background-size: cover;
  color: #fff;
}

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

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

/* ------------------ */

.rsvp-area{ position: relative; z-index: 1;
  background: url(images-v1/background/rsvp_bg.webp) no-repeat center center;
  background-size: cover;
  color: #fff;
}

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

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



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

.contact-area{ position: relative; overflow: hidden; box-shadow: 1px 10px 40px rgba(0,0,0,.4); }

.contact-area .contact-wrapper{ width: 50%; }

.contact-area .map-area{ width: 50%; position: absolute; top: 0; bottom: 0; right: 0; }


.contact-area .phone{ margin: 10px 0; font-size: 2em; color: #4bc196; }


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

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



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

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

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

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


footer .logo-wrapper .icon{ color: #4bc196; }

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: 55px;
	border-radius: 100px; background: #E55D73; color: #fff; }

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


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

.droplet {
  position: absolute;
  width: 20px;
  left: calc(50% - 10px);
  bottom: 30px;
  z-index: 1;
  animation: action 1s infinite alternate;
}

section {
  /*z-index: 2;*/
  position: relative;
  background-color: white;
}

@keyframes action {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-15px);
  }
}

.white-text {
  text-shadow: grey 1px 1px 1px;
}

@media (max-width: 992px) {

  header .container {
    width: 100%;
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px;
  }

  .main-menu {
    padding-right: 15px;
  }
}