@keyframes bgcolor-change{
	0%{
		background-color: #3d99b3;
		transition: .2s all ease-out;
		-webkit-transition: .2s all ease-out;
		-moz-transition: .2s all ease-out;
		-o-transition: .2s all ease-out;
	}
	50%{
		background-color: #31b1d8;
		transition: .2s all ease-out;
		-webkit-transition: .2s all ease-out;
		-moz-transition: .2s all ease-out;
		-o-transition: .2s all ease-out;
	}
	100%{
		background-color: #75d1ed;
		transition: .2s all ease-out;
		-webkit-transition: .2s all ease-out;
		-moz-transition: .2s all ease-out;
		-o-transition: .2s all ease-out;
	}
}

#retreat-hero{
	padding: 270px 0 45px;
	position: relative;
	border-bottom: 5px solid #fff;
    background-image: url(/wp-content/uploads/2019/08/retreat-hero-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
#retreat-hero::after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(116,150,160,0.31) !important;
    background: -moz-linear-gradient(top, rgba(216, 230, 236,.1) 0%, #013f64 100%) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(216, 230, 236,.1)), color-stop(100%,#013f64));
    background: -webkit-linear-gradient(top, rgba(216, 230, 236,.1) 0%,#013f64 100%) !important;
    background: -o-linear-gradient(top, rgba(216, 230, 236,.1) 0%,#013f64 100%) !important;
    background: -ms-linear-gradient(top, rgba(216, 230, 236,.1) 0%,#013f64 100%) !important;
    background: linear-gradient(to bottom, rgba(216, 230, 236,.1) 0%,#013f64 100%) !important;
    opacity: 0.9 !important;
    z-index: 0;
}
#retreat-hero h1 {
    margin: 0 auto;
    position: relative;
    top: 0px;
    color: #fff !important;
    font-size: 45px;
    font-weight: 400;
    text-shadow: 0 4px 4px #3333332e;
    text-align: center;
    z-index: 22;
}
#retreat-hero h1 strong {
    margin: 5px auto 0;
    padding: 0 10px;
    display: block;
    font-weight: 700;
    background-color: rgb(61, 153, 179);
    width: 80%;
    max-width: 580px;

    z-index: 22;

    animation: bgcolor-change 2s infinite;
	    -webkit-animation: bgcolor-change 2s infinite;
	    -moz-animation: bgcolor-change 2s infinite;
	    -o-animation: bgcolor-change 2s infinite;

    transition: .2s all ease-out;
	    -webkit-transition: .2s all ease-out;
	    -moz-transition: .2s all ease-out;
	    -o-transition: .2s all ease-out;

}
#retreat-info{
	padding: 50px 0;
}
#retreat-info h2 {
    margin: 0 auto 14px;
    padding: 0;
    color: #404040;
    font-size: 56px !important;
    line-height: 1.15em;
    font-weight: 300;
    text-transform: uppercase;
    text-align: center;
}
#retreat-info h3 {
    margin: 0 auto 18px;
    padding: 0;
    font-size: 42px;
    font-weight: 700;
    color: #3d99b3;
}
#retreat-info h4 {
	margin: 0 auto;
    font-size: 29px;
    line-height: 1.2em;
    color: #888888;
    font-weight: 400;
    text-transform: none;
}

#retreat-gallery{
	padding: 0 0 20px 0;
}
#retreat-gallery .standard-section-wrapper{
	max-width: 100%;
    align-items: end;
}
#retreat-gallery .standard-section-block{
	margin: 0 6px 6px 0 !important;
	flex: 1 0 calc(25% - 6px);
}
#retreat-gallery .standard-section-block:nth-child(4n){
	margin-right: 0 !important;
}

.wp-block-group__inner-container {
    margin: 0 auto;
     width: 90%;
    max-width: 1220px;

}
.btn {
    margin: 0;
    padding: 12px 18px;
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    line-height: 1em;
    font-display: optional;
    color: #000!important;
    outline: 0;
    text-decoration: none;
    border: 0;
    background-color: #6cd0ed!important;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -o-border-radius: 25px;
    transition: color .1s ease-in-out,background .1s ease-in-out,border .1s ease-in-out;
    -webkit-transition: color .1s ease-in-out,background .1s ease-in-out,border .1s ease-in-out;
}
@keyframes btnAnimated {
    20% {
        box-shadow: 0 0 0 15px rgb(77 164 195/80%);
        -webkit-box-shadow: 0 0 0 15px rgb(77 164 195/80%);
        -moz-box-shadow: 0 0 0 15px rgb(77 164 195/80%);
        -o-box-shadow: 0 0 0 15px rgb(77 164 195/80%)
    }

    80% {
        box-shadow: 0 0 0 7px rgb(77 164 195/55%);
        -webkit-box-shadow: 0 0 0 7px rgb(77 164 195/55%);
        -moz-box-shadow: 0 0 0 7px rgb(77 164 195/55%);
        -o-box-shadow: 0 0 0 7px rgb(77 164 195/55%)
    }
}

.btn-animated,.btn-animation {
    margin: 0;
    text-align: center;
    animation: btnAnimated 2s infinite;
    -webkit-animation: btnAnimated 2s infinite;
    -moz-animation: btnAnimated 2s infinite;
    -o-animation: btnAnimated 2s infinite
}

.btn-animated:hover,.btn-animation:hover {
    text-decoration: none;
    animation: none;
    box-shadow: 0 0 0 15px rgb(77 164 195/55%);
    -webkit-box-shadow: 0 0 0 15px rgb(77 164 195/55%);
    -moz-box-shadow: 0 0 0 15px rgb(77 164 195/55%);
    -o-box-shadow: 0 0 0 15px rgb(77 164 195/55%);
    transform: scale(1)!important;
    -webkit-transform: scale(1)!important;
    -moz-transform: scale(1)!important;
    -o-transform: scale(1)!important
}

@keyframes btnAnimatedYellow {
    20% {
        box-shadow: 0 0 0 15px rgb(235 206 126/60%);
        -webkit-box-shadow: 0 0 0 15px rgb(235 206 126/60%);
        -moz-box-shadow: 0 0 0 15px rgb(235 206 126/60%);
        -o-box-shadow: 0 0 0 15px rgb(235 206 126/60%)
    }

    80% {
        box-shadow: 0 0 0 7px rgb(235 206 126/40%) -webkit-box-shadow:0 0 0 7px rgb(235 206 126/40%);
        -moz-box-shadow: 0 0 0 7px rgb(235 206 126/40%);
        -o-box-shadow: 0 0 0 7px rgb(235 206 126/40%)
    }
}

.btn-animated.btn-yellow,.btn-animation.btn-yellow {
    margin: 0;
    text-align: center;
    animation: btnAnimatedYellow 2s infinite;
    -webkit-animation: btnAnimatedYellow 2s infinite;
    -moz-animation: btnAnimatedYellow 2s infinite;
    -o-animation: btnAnimatedYellow 2s infinite
}

.btn-animated.btn-yellow:hover,.btn-animation.btn-yellow:hover {
    text-decoration: none;
    animation: none;
    box-shadow: 0 0 0 15px rgb(235 206 126/60%);
    -webkit-box-shadow: 0 0 0 15px rgb(235 206 126/60%);
    -moz-box-shadow: 0 0 0 15px rgb(235 206 126/60%);
    -o-box-shadow: 0 0 0 15px rgb(235 206 126/60%);
    transform: scale(1)!important;
    -webkit-transform: scale(1)!important;
    -moz-transform: scale(1)!important;
    -o-transform: scale(1)!important
}
/* POPUPS */
	.lightbox {
	    height: 90px;
	    width: 90px;
	}
	.img-popup {
	    position: fixed;
	    top: 0;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    background: rgba(38, 40, 52, 0.9);
	    text-align: center;
	    display: none;
	    z-index: 9999999999999;
	    animation: pop-in;
	    animation-duration: 0.5s;
	    -webkit-animation: pop-in 0.5s;
	    -moz-animation: pop-in 0.5s;
	    -ms-animation: pop-in 0.5s;
	}
	.img-popup img {
	    position: absolute;
	    top: 50%;
	    max-width: 100%;
	    max-height: 100vh;
	    display: inline-block;
	    transform: translate(-50%, -50%);;
	}
	.close-lightbox {
	    position: absolute;
	    top: 45px;
	    right: 20%;
	    padding: 0px 10px;

	    color: #fff;
	    font-size: 35px;
	    line-height: 45px;

	    border: 2px solid #fff;
	    border-radius: 50%;
	    	-webkit-border-radius: 50%;
	    	-moz-border-radius: 50%;
	    	-o-border-radius: 50%;
	    z-index: 99;
		cursor: pointer;
	    width: 55px;
	    height: 55px;
	}
	.lightboxfadeout{
	    animation: fadeout;
	    animation-duration: 0.5s;
	    -webkit-animation: fadeout 0.5s;
	    -moz-animation: fadeout 0.5s;
	    -ms-animation: fadeout 0.5s;
	}

	@keyframes pop-in {
	    0% {
	        opacity: 0;
	        transform: scale(0.1);
	    }
	    100% {
	        opacity: 1;
	        transform: scale(1);
	    }
	}

	@-webkit-keyframes pop-in {
	    0% {
	        opacity: 0;
	        -webkit-transform: scale(0.1);
	    }
	    100% {
	        opacity: 1;
	        -webkit-transform: scale(1);
	    }
	}

	@-moz-keyframes pop-in {
	    0% {
	        opacity: 0;
	        -moz-transform: scale(0.1);
	    }
	    100% {
	        opacity: 1;
	        -moz-transform: scale(1);
	    }
	}


	@keyframes fadeout {
	    100% {
	        opacity: 0;
	        transform: scale(0.1);
	    }
	    0% {
	        opacity: 1;
	        transform: scale(1);
	    }
	}

	@-webkit-keyframes fadeout {
	    100% {
	        opacity: 0;
	        -webkit-transform: scale(0.1);
	    }
	    0% {
	        opacity: 1;
	        -webkit-transform: scale(1);
	    }
	}

	@-moz-keyframes fadeout {
	    100% {
	        opacity: 0;
	        -moz-transform: scale(0.1);
	    }
	    0% {
	        opacity: 1;
	        -moz-transform: scale(1);
	    }
	}




@media screen and (max-width: 768px){
	#retreat-hero h1{
		font-size: 35px;
	}
	#retreat-hero h1 strong{
		font-size: 24px !important;
	}
	#retreat-info h2{
		margin: 0 auto 10px !important;
		font-size: 28px !important;
	}
	#retreat-info h3{
		margin: 10px auto 15px;
		font-size: 28px !important;
	}
	#retreat-info h4{
		font-size: 16px;
	}

}