/* Index Style */

@font-face {
	font-family:gost;
	src:url('../font/gost.ttf');
}
.gost{
	font-family:gost;
}

/* HOME STYLE */

.sliderpic{
	width:100%;
}
@media screen and (min-width: 601px) {
	.frameinput{
		width:100%;
	}
	/*inputan admin .forminput*/
	.forminput{
		width:100%;
	}
	.borderframe{
		border-radius:0 0 10px 10px;
	}
	.fontauto{
		
	}
}
@media screen and (max-width: 600px) {
	.sliderframe{
		margin-top:76px;
	}
	.borderframe{
		border-radius:0 0 0 0;
	}
	.fontauto{
		font-size:20px;
	}
	.fontauto2{
		font-size:10px;
	}
}

.logoframe{
	position:absolute; 
	bottom:-100px;  
	margin-left: auto; 
	margin-right: auto; 
	left:0;
	right:0;
}
.extracaption{
	position: absolute;
	z-index: 10;
	left:15%;
	right:15%;
	bottom:15%;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-right:20px;
	padding-left:20px;
	color: #fff;
	text-shadow: 0 0 8px black;
	background-color:rgb(0,0,0,0.3);
	border-radius:10px;
}

footer .row .col-12 input[type=email]{
	height: 45px; width:200px;
	border:none;
	border-bottom: 1px solid #9d9a8f;
	background:black;
	color: #ffffff;
}
.newsupdate{
	background-image:url("../images/newsbackground.jpg");
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	padding-bottom:100px;
}
footer .row a{
	color:rgba(255, 255, 255, 0.8);
}

.caption2{
	position: absolute;
    width: 100%;
    height: 160px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: 2;
    text-align: center;
}
.hover-zoom-out{
	transition: transform .2s; /* Animation */
    margin: 0 auto;
}
.hover-zoom-out:hover{
	transform: scale(1.1); /* (110% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

#imgfilter:hover{
	filter: grayscale(100%);
}
/* END of HOME STYLE */

/* ABOUT US STYLE */

.aboutopsi{
	background-image:url('../images/aboutopsi1.jpg');
	background-size:cover;
	background-position:center;
}

@media screen and (min-width: 601px) {
	.about-caption{
		position: absolute;
		top: 10%;
		z-index: 10;
		color: white;
		text-align: center;
	}
	.aboutanim1{
		display: block;
		width: 100%;
		animation-duration: 5s;
		animation-timing-function: ease-in-out;
		overflow: hidden;
	}
	.aboutanim1{
		animation-name: textabout1;
	}
	@keyframes textabout1 {
		0%, 25% { top: -100%; opacity: 0; }
		25%,100% { top:10%; opacity: 1; }
	}
	.about-caption2{
		position: absolute;
		bottom: 85%;
		z-index: 10;
		color: white;
		text-align: center;
	}
	.aboutanim2{
		display: block;
		width: 100%;
		animation-duration: 5s;
		animation-timing-function: ease-in-out;
		overflow: hidden;
	}
	.aboutanim2{
		animation-name: textabout2;
	}

	@keyframes textabout2 {
		0%, 25% { bottom: -100%; opacity: 0; }
		25%,100% { bottom:85%; opacity: 1; }
	}
	.abouttext{
		color:white;
	}	
}

@media screen and (max-width: 600px) {
	.about-caption{
		position: absolute;
		top: 90px;
		z-index: 10;
		color: white;
		text-align: center;
	}
	.abouth1{
		font-size:20px;
	}
	.aboutanim1{
		display: block;
		width: 100%;
		animation-duration: 5s;
		animation-timing-function: ease-in-out;
		overflow: hidden;
	}
	.aboutanim1{
		animation-name: textabout1;
	}
	@keyframes textabout1 {
		0%, 25% { top: -100%; opacity: 0; }
		25%,100% { top:2.5%; opacity: 1; }
	}
	.about-caption2{
		position: absolute;
		top: 140px;
		z-index: 10;
		color: white;
		text-align: center;
	}
	.aboutanim2{
		display: block;
		width: 100%;
		animation-duration: 5s;
		animation-timing-function: ease-in-out;
		overflow: hidden;
	}
	.aboutanim2{
		animation-name: textabout2;
	}

	@keyframes textabout2 {
		0%, 25% { bottom: -100%; opacity: 0; }
		25%,100% { bottom:80%; opacity: 1; }
	}
	.abouttext{
		color:white;
	}
	.aboutheadertext{
		font-size:10px;
	}
}

/* END of ABOUT US STYLE */

/* ROOMRATES STYLE */

@media screen and (min-width: 601px) {
	.room-caption{
		position: absolute;
		top: 10%;
		z-index: 10;
		color: white;
		text-align: center;
	}
	.roomanim1{
		display: block;
		width: 100%;
		animation-duration: 5s;
		animation-timing-function: ease-in-out;
		overflow: hidden;
	}
	.roomanim1{
		animation-name: textroom1;
	}
	@keyframes textroom1 {
		0%, 25% { top: -100%; opacity: 0; }
		25%,100% { top:10%; opacity: 1; }
	}
	.room-caption2{
		position: absolute;
		bottom: 84%;
		z-index: 10;
		color: white;
		text-align: center;
	}
	.roomanim2{
		display: block;
		width: 100%;
		animation-duration: 5s;
		animation-timing-function: ease-in-out;
		overflow: hidden;
	}
	.roomanim2{
		animation-name: textroom2;
	}

	@keyframes textroom2 {
		0%, 25% { bottom: -100%; opacity: 0; }
		25%,100% { bottom:84%; opacity: 1; }
	}
}

@media screen and (max-width: 600px) {
	.room-caption{
		position: absolute;
		top: 90px;
		z-index: 10;
		color: white;
		text-align: center;
	}
	.roomh1{
		font-size:20px;
	}
	.roomanim1{
		display: block;
		width: 100%;
		animation-duration: 5s;
		animation-timing-function: ease-in-out;
		overflow: hidden;
	}
	.roomanim1{
		animation-name: textroom1;
	}
	@keyframes textroom1 {
		0%, 25% { top: -100%; opacity: 0; }
		25%,100% { top:1.65%; opacity: 1; }
	}
	.room-caption2{
		position: absolute;
		top: 140px;
		z-index: 10;
		color: white;
		text-align: center;
	}
	.roomanim2{
		display: block;
		width: 100%;
		animation-duration: 5s;
		animation-timing-function: ease-in-out;
		overflow: hidden;
	}
	.roomanim2{
		animation-name: textroom2;
	}

	@keyframes textroom2 {
		0%, 25% { bottom: -100%; opacity: 0; }
		25%,100% { bottom:80%; opacity: 1; }
	}
	.roomheadertext{
		font-size:10px;
	}
}

/* END of ROOMRATES STYLE */


/* PACKAGES */

.booknow{
	text-decoration:none;
	color:black;
}
.booknow:hover{
	text-decoration:none;
	color:#0061ff;
}
/* END of PACKAGES */

/* RESERVATION STYLE */

.resback{
	background-image:url('../images/reservationback.jpg');
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	color:white;
}
@media screen and (max-width: 600px) {
	.packagestitle{
		font-size:15px;
	}
	
}


/* END of RESERVATION STYLE */

/* GALLERY STYLE */

@media screen and (min-width: 601px) {
	.galrow {
		display: -ms-flexbox;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		margin-right: -15px;
		margin-left: -15px;
	}
	.galleryimg{
		object-fit:cover;
	}
	.gallery-caption {
		position: absolute;
		right: 15%;
		top: 250px;
		left: 15%;
		z-index: 10;
		color: white;
		text-align: center;
	}
	.gallery-caption2 {
		position: absolute;
		right: 15%;
		top:500px;
		z-index: 10;
		color: white;
		text-align: center;
	}
	.textanim1{
		display: block;
		width: 100%;
		animation-duration: 5s;
		animation-timing-function: ease-in-out;
		overflow: hidden;
	}
	.textanim1{
		animation-name: textslider1;
	}
	@keyframes textslider1 {
		0%, 30% { left: -100%; opacity: 0; }
		30%,100% { left: 15%; opacity: 1; }
	}
	.textanim2{
		display: block;
		width: 100%;
	//	top:400px;
		animation-duration: 5s;
		animation-timing-function: ease-in-out;
		overflow: hidden;
	}
	.textanim2{
		animation-name: textslider2;
	}
	@keyframes textslider2 {
		0%, 35% { right: -100%; opacity: 0; }
		35%,100% { right: 15%; opacity: 1; }
	}
}

@media screen and (max-width: 600px) {
	.galrow {
		display: -ms-flexbox;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		margin-right: -15px;
		margin-left: -15px;
	}
	.galleryimg{
		object-fit:cover;
	}
	.gallery-caption {
		position: absolute;
		top: 85px;
		left: 5%;
		z-index: 10;
		color: white;
		text-align: center;
		font-size:10px;
	}
	.gallery-title{
		font-size:12px;
	}
	.gallery-caption2 {
		position: absolute;
		right: 5%;
		top:195px;
		z-index: 10;
		color: white;
		text-align: center;
		font-size:6px;
	}
	.textanim1{
		display: block;
		width: 100%;
		animation-duration: 5s;
		animation-timing-function: ease-in-out;
		overflow: hidden;
	}
	.textanim1{
		animation-name: textslider1;
	}
	@keyframes textslider1 {
		0%, 30% { left: -100%; opacity: 0; }
		30%,100% { left: 5%; opacity: 1; }
	}
	.textanim2{
		display: block;
		width: 100%;
	//	top:400px;
		animation-duration: 5s;
		animation-timing-function: ease-in-out;
		overflow: hidden;
	}
	.textanim2{
		animation-name: textslider2;
	}
	@keyframes textslider2 {
		0%, 35% { right: -100%; opacity: 0; }
		35%,100% { right: 5%; opacity: 1; }
	}
	
	
	
	
}

/* END of GALLERY STYLE */

@media screen and (min-width: 601px) {
	.contacttext{
		text-align:right;
	}
	
}

@media screen and (max-width: 600px) {
	.contacttext{
		text-align:left;
	}
}
.footerbutton{
	text-decoration:none;
	color:#a5a5a5;
}
.footerbutton:hover{
	text-decoration:none;
	color:white;
}