.hovereffect {
width:100%;
height:100%;
float:left;
overflow:hidden;
position:relative;
text-align:center;
cursor:pointer;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}


/* Main CSS */
.gridfolio > li,
.gridfolio > .hoverfolio {
	display: flex;
	justify-content: center;
	align-items: center;
}

.gridfolio {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	grid-auto-rows: 300px;
	grid-auto-flow: dense;
	grid-gap: 6px;
	margin: 6px 0;
}
.gridfolio .wide {
	grid-column: span 2;
}
.gridfolio .tall {
	grid-row: span 2;
}
.gridfolio .big {
	grid-column: span 2;
	grid-row: span 2;
}
  
.hovereffect img {
display:block;
position:relative;
-webkit-transition:all .4s linear;
transition:all .4s linear;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;

}
.hovereffect:hover img {
-ms-transform:scale(1.1);
-webkit-transform:scale(1.1);
transform:scale(1.1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
 opacity: 0.7; 

}

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
  
.hovereffect img {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}
.hovereffect:hover img {
-ms-transform:scale(1.0);
-webkit-transform:scale(1.0);
transform:scale(1.0);
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
  opacity: 0.7; 
  }
}
 
/* ==========================================================================
folio
========================================================================== ///////////*/
.hoverfolio {
width:100%;
height:100%;
/* float:left; */
overflow:hidden;
position:relative;
text-align:center;
cursor:pointer;
/*important: margin-bottom: 0; - check megamenu*/
}
  
.hoverfolio img {
display:block;
position:relative;
-webkit-transition:all .4s linear;
transition:all .4s linear;
width: 100%;
}

.hoverfolio a {
	width: 100%;
	display: block;
	height: 100%;
}

.hoverfolio:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
-webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  opacity: 0.7; 
}

/* ==========================================================================
grid
========================================================================== ///////////*/
.grid li.shown,
.no-js .grid li,
.no-cssanimations .grid li {
	opacity: 1;
}
.grid {
	/*max-width: 69em;*/
	list-style: none;
	margin: 10px auto;
	padding: 0;
}
.grid li {
	display: block;
	float: left;
	padding: 0px;
	width: 33.33333333%;
	opacity: 1;
}

.grid li.shown,
.no-js .grid li,
.no-cssanimations .grid li {
	opacity: 1;
}

.grid li a,
.grid li img {
	outline: none;
	border: none;
	display: block;
	max-width: 100%;

}

/* ==========================================================================
proposal venues
========================================================================== ///////////*/
.gridPropose {
	list-style: none;
	margin: 0px auto;
	padding: 0; float: left; display: inline-flex;
}

.gridPropose h3 {font-size: 18px; color: #000000; text-transform: uppercase; font-weight: 700; line-height: 1.3em; letter-spacing: normal;}
.gridPropose h4 a {text-decoration: underline; font-weight: 700; }
.gridPropose p {font-size: 14px; line-height: 1.6em; padding: 10px 0;}
.gridPropose li {width: 25%;}

.gridPropose li a,
.gridPropose li img {
	outline: none;
	border: none;
	display: block;
	max-width: 100%;
}


.proposPad {padding: 14% 15px 0; display: inline-block;}


@media (max-width: 991px) {
.gridPropose {display: block;}
.gridPropose h3 {padding-top: 20px; font-size: 20px; }
.gridPropose li {width: 100%;}
.proposPad {padding: 20px 15px;}
	
}

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

proposal & wedding services - packages page

========================================================================== ///////////*/
.propose {
	list-style: none;
	margin: 0px auto;
	padding: 0;
}
.propose li {
	display: block;
	float: left;
	padding: 0;
	width: 100%;
	opacity: 1;}
	
.propose li img {
	outline: none;
	border: none;
	display: block;
	max-width: 100%;
}
/* ==========================================================================
grid gal 1
========================================================================== ///////////*/
.gridgal {
	list-style: none;
	margin: 0px auto;
	padding: 0;
}
.gridgal li {
	display: block;
	float: left;
	padding: 0;
	width: 25%;
	opacity: 1;
	}
	
.gridgal li img {
	outline: none;
	border: none;
	display: block;
	max-width: 100%;}
	
/* ==========================================================================
grid gal  - 3 in roq
========================================================================== ///////////*/
.gridgal2 {
	/*max-width: 69em;*/
	list-style: none;
	margin: 0px auto;
	padding: 0;
}
.gridgal2 li {
	display: block;
	float: left;
	padding: 0;
	width: 33.33333333%;
	opacity: 1;}
	
.gridgal2 li img {
	outline: none;
	border: none;
	display: block;
	max-width: 100%;}

/* ==========================================================================
grid folio 16.66666667%
========================================================================== ///////////*/
.gridfolio {
	list-style: none;
	margin: 0px auto;
	padding: 0;
}
.gridfolio li {
	opacity: 1;
}
	
.gridfolio li img {
	outline: none;
	border: none;
	display: block;
	max-width: 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 992px) {
	.gridfolio li {
		width: 100%;
	}
}

/* ==========================================================================
grid text - HONE PAGE
========================================================================== ///////////*/
.gridtxt{
	/*max-width: 69em;*/
	list-style: none; 
	margin: 0px auto;
	padding: 0;
}
.gridtxt li {
	display: block; 
	float: left;
	padding: 0;
	width: 33%;
	opacity: 1;}

@media (max-width: 991px) {
.gridtxt li {width: 100%;}	
}	


/* ==========================================================================
grid ALL
========================================================================== ///////////*/
.grid li, .gridgal li, .gridfolio li, .gridgal2 li, .gridPropose li
	{-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	transition:all 0.3s ease;}

@media screen and (max-width: 991px) {
	.grid li,  .gridgal li {width: 50%;}
	
}

@media screen and (max-width: 480px) {
	.gridgal2 li, .gridgal li {width: 100%;}
}

/* Effect 1: opacity */
.grid.effect-1 li.animate {
	-webkit-animation: fadeIn 0.65s ease forwards;
	-moz-animation: fadeIn 0.65s ease forwards;
	animation: fadeIn 0.65s ease forwards;
}

@-webkit-keyframes fadeIn {
	to { opacity: 1; }
}

@-moz-keyframes fadeIn {
	to { opacity: 1; }
}

@keyframes fadeIn {
	to { opacity: 1; }
}

/* Effect 2: Move Up */
.grid.effect-2 li.animate{
	-webkit-transform: translateY(200px);
	-moz-transform: translateY(200px);
	transform: translateY(200px);
	-webkit-animation: moveUp 0.65s ease forwards;
	-moz-animation: moveUp 0.65s ease forwards;
	animation: moveUp 0.65s ease forwards;
}

@-webkit-keyframes moveUp {
	to { -webkit-transform: translateY(0); opacity: 1; transform: translateY(0); }
}

@-moz-keyframes moveUp {
	to { -moz-transform: translateY(0); opacity: 1; transform: translateY(0); }
}

@keyframes moveUp {
	to { transform: translateY(0); opacity: 1; }
}
/* Effect 2: Scale up WP 10 */
.wp10 {
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
	-webkit-animation: moveUp 0.65s ease forwards;
	-moz-animation: moveUp 0.65s ease forwards;
	animation: moveUp 0.65s ease forwards;
}

@-webkit-keyframes moveUp {
	to { -webkit-transform: translateY(0); opacity: 1; transform: translateY(0);}
}

@-moz-keyframes moveUp {
	to { -moz-transform: translateY(0); opacity: 1; transform: translateY(0);}
}

@keyframes moveUp {
	to { transform: translateY(0); opacity: 1; }
}

/* Effect 3: Scale up */
.li.animate {
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
	-webkit-animation: scaleUp 0.65s ease-in-out forwards;
	-moz-animation: scaleUp 0.65s ease-in-out forwards;
	animation: scaleUp 0.65s ease-in-out forwards;
	
	/* Effect 3: Scale up iOS safari IMPORTANT */
	
	-webkit-animation-duration: 0.65s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards;
}


@-webkit-keyframes scaleUp {
	to { -webkit-transform: scale(1); opacity: 1; transform: scale(1);}
}

@-moz-keyframes scaleUp {
	to { -moz-transform: scale(1); opacity: 1; transform: scale(1); }
}

@keyframes scaleUp {
	to { transform: scale(1); opacity: 1; }
}

/* Effect 4: fall perspective */
.grid.effect-4 {
	-webkit-perspective: 1300px;
	-moz-perspective: 1300px;
	perspective: 1300px;
}

.grid.effect-4 li.animate {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translateZ(400px) translateY(300px) rotateX(-90deg);
	-moz-transform: translateZ(400px) translateY(300px) rotateX(-90deg);
	transform: translateZ(400px) translateY(300px) rotateX(-90deg);
	-webkit-animation: fallPerspective .8s ease-in-out forwards;
	-moz-animation: fallPerspective .8s ease-in-out forwards;
	animation: fallPerspective .8s ease-in-out forwards;
}

@-webkit-keyframes fallPerspective {
	100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1;
	transform: translateZ(0px) translateY(0px) rotateX(0deg); }
}

@-moz-keyframes fallPerspective {
	100% { -moz-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; 
	transform: translateZ(0px) translateY(0px) rotateX(0deg); }
}

@keyframes fallPerspective {
	100% { transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}

/* Effect 5: fly (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
.grid.effect-5 {
	-webkit-perspective: 1300px;
	-moz-perspective: 1300px;
	perspective: 1300px;
}

.grid.effect-5 li.animate {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 50% 50% -300px;
	-moz-transform-origin: 50% 50% -300px;
	transform-origin: 50% 50% -300px;
	-webkit-transform: rotateX(-180deg);
	-moz-transform: rotateX(-180deg);
	transform: rotateX(-180deg);
	-webkit-animation: fly .8s ease-in-out forwards;
	-moz-animation: fly .8s ease-in-out forwards;
	animation: fly .8s ease-in-out forwards;
}

@-webkit-keyframes fly {
	100% { -webkit-transform: rotateX(0deg); opacity: 1; transform: rotateX(0deg); }
}

@-moz-keyframes fly {
	100% { -moz-transform: rotateX(0deg); opacity: 1; transform: rotateX(0deg);}
}

@keyframes fly {
	100% { transform: rotateX(0deg); opacity: 1; }
}

/* Effect 6: flip (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
.grid.effect-6 {
	-webkit-perspective: 1300px;
	-moz-perspective: 1300px;
	perspective: 1300px;
}

.grid.effect-6 li.animate {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 0% 0%;
	-moz-transform-origin: 0% 0%;
	transform-origin: 0% 0%;
	-webkit-transform: rotateX(-80deg);
	-moz-transform: rotateX(-80deg);
	transform: rotateX(-80deg);
	-webkit-animation: flip .8s ease-in-out forwards;
	-moz-animation: flip .8s ease-in-out forwards;
	animation: flip .8s ease-in-out forwards;
}

@-webkit-keyframes flip {
	100% { -webkit-transform: rotateX(0deg); opacity: 1; 
	transform:  rotateX(0deg);}
}

@-moz-keyframes flip {
	100% { -moz-transform: rotateX(0deg); opacity: 1; transform: rotateX(0deg); }
}

@keyframes flip {
	100% { transform: rotateX(0deg); opacity: 1; }
}

/* Effect 7: helix (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
.grid.effect-7 {
	-webkit-perspective: 1300px;
	-moz-perspective: 1300px;
	perspective: 1300px;
}

.grid.effect-7 li.animate {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
	-webkit-animation: helix .8s ease-in-out forwards;
	-moz-animation: helix .8s ease-in-out forwards;
	animation: helix .8s ease-in-out forwards;
}

@-webkit-keyframes helix {
	100% { -webkit-transform: rotateY(0deg); opacity: 1; transform: rotateY(0deg);  }
}

@-moz-keyframes helix {
	100% { -moz-transform: rotateY(0deg); opacity: 1; transform: rotateY(0deg); }
}

@keyframes helix {
	100% { transform: rotateY(0deg); opacity: 1; }
}

/* Effect 8:  */
.grid.effect-8{
	-webkit-perspective: 1300px;
	-moz-perspective: 1300px;
	perspective: 1300px;
}

.grid.effect-8 li.animate{
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: scale(0.4);
	-moz-transform: scale(0.4);
	transform: scale(0.4);
	-webkit-animation: popUp .8s ease-in forwards;
	-moz-animation: popUp .8s ease-in forwards;
	animation: popUp .8s ease-in forwards;
}

@-webkit-keyframes popUp {
	70% { -webkit-transform: scale(1.1); opacity: .8; transform: scale(1.1); -webkit-animation-timing-function: ease-out; }
	100% { -webkit-transform: scale(1); opacity: 1; transform: scale(1);}
}

@-moz-keyframes popUp {
	70% { -moz-transform: scale(1.1); opacity: .8; transform: scale(1.1); -moz-animation-timing-function: ease-out; }
	100% { -moz-transform: scale(1); opacity: 1; transform: scale(1);  }
}

@keyframes popUp {
	70% { transform: scale(1.1); opacity: .8; animation-timing-function: ease-out; }
	100% { transform: scale(1); opacity: 1; }
}


.container--width {
	max-width: 1575px;
	margin: 0 auto;
	width: 100%;
}


.gridfolio__wrapper {
	padding: 0px 0px 6px;
}

.fancybox-button {
	background-clip: initial !important;
	background-color: initial !important;
}

@media screen and (min-width: 1440px) {
	.fancybox-button {
		width: fit-content !important;
	}

	.fancybox-navigation .fancybox-button--arrow_left {
		padding: 31px 106px 31px 6px;
	}

	.fancybox-navigation .fancybox-button--arrow_right {
		padding: 31px 6px 31px 106px;
	}
}

.fancybox-button div {
	background-color: black !important;
}


.fancybox-close-small {
	background-color: black !important;
    background-clip: border-box !important;
}


.fancybox-is-open {
    background: rgba(0,0,0, .7);
}