/** welcome banner **/

.welcome-banner-wrap{
	max-width: 1300px;
	display: flex;
	align-items: center;
	margin: 0 auto;
	justify-content:center;
	position:relative;
}

.welcome-banner,
.swiper-wrapper .swiper-image-wrap
{
	height: 574px;
	width:100%;
}

.welcome-banner {
	display: grid;
	grid-template-columns: 45px auto 1fr auto 45px;
}

.welcome-banner .swiper-wrapper {
	grid-column: 1 / -1;
	grid-row: 1 / -1;
}

.welcome-banner .bt-swiper-nav {
	cursor: pointer;
	grid-row: 1 / -1;
	z-index: 1;
	align-self: center;
}

.welcome-banner .bt-swiper-nav.prev {
	grid-column: 2 / 3;
}

.welcome-banner .bt-swiper-nav.next {
	grid-column: 4 / 5;
}

.welcome-banner .swiper-slide {
	display: flex;
	align-items: flex-end;
}

.welcome-banner .message {
	margin: 0 78px 63px 0;
	border: 2px solid #dcc182;
	padding: 5px;
	position:absolute;
}

.welcome-banner .message > * {
	padding: 13px 17px;
	border: 1px solid #dcc182;
}
.swiper-wrapper .swiper-image-wrap{

}
.swiper-wrapper .swiper-image-wrap img{
	object-fit:cover;
		height:100%;
}

/* video */

.banner-video-wrap{
	height: 100%;
	overflow: hidden;
	position: absolute;
	width: 100%;
	z-index: -1;
}
.banner-video-wrap video {
	position: absolute;
	width: 100%;
	min-height: 100%;


}
audio, canvas, video {
	display: inline-block;
}
@media (min-width: 1024px) {
	.welcome-banner-pagination .swiper-pagination {
		display: none;
	}
}

@media (max-width: 1023px) {
	.welcome-banner .bt-swiper-nav {
		display: none;
	}


	.welcome-banner-pagination.swiper-container{
		position: absolute;
		bottom: -30px;
		left: 50%;
		-webkit-transform: translate(-50%, 0);
		-moz-transform: translate(-50%, 0);
		-o-transform: translate(-50%, 0);
		-ms-transform: translate(-50%, 0);
		transform: translate(-50%, 0);
		width:100%;
		    height: 30px;
	}

	.welcome-banner-pagination .swiper-pagination {
position:relative;
		text-align: unset;
		z-index: unset;
		display: flex;
		justify-content: center;
		padding: 10px 0;

	}

	.welcome-banner-pagination .swiper-pagination .swiper-pagination-bullet {
		width: 14px;
		height: 14px;
		border: 2px solid #dcc182;
		background-color: #fff;
		box-sizing: border-box;
		opacity: 1;
		margin: 0 5px;
	}

	.welcome-banner-pagination .swiper-pagination .swiper-pagination-bullet-active {
		background-color: #000;
	}
}

/** welcome banner **/

/** four cubes **/

.four-cubes {
	height: 1065px;
	margin: 46px auto 0;
	display: grid;
	grid-gap: 10px;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 75px 1fr;
}

.four-cubes .cube {
	display: flex;
	align-items: flex-end;
}

.four-cubes .cube .name {
	padding: 2px;
	border: 1px solid #dcc182;
	margin: 0 27px 26px 0;
}

.four-cubes .cube .name span {
	padding: 12px;
	border: 1px solid #dcc182;
}

.four-cubes .cube:hover .name span {
	text-decoration: underline;
}

.four-cubes .left-top {
	grid-column: 2 / 3;
	grid-row: 1 / 3;
}

.four-cubes .right-top {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}

.four-cubes .left-bottom {
	grid-column: 2 / 3;
	grid-row: 3 / 4;
}

.four-cubes .right-bottom {
	grid-column: 1 / 2;
	grid-row: 2 / 4;
}

/** four cubes **/

/** main video **/

.main-video {
	display: grid;
	height: 640px;
	margin: 55px auto 0;
	grid-template-columns: 1fr auto 1fr;
}

.main-video .play-icon {
	grid-column: 2 / 3;
	grid-row: 1 / -1;
	align-self: center;
	display: grid;
}

.main-video .play-icon img,
.main-video .play-icon .loader {
	grid-column: 1/-1;
	grid-row: 1/-1;
}

.main-video .play-icon .loader {
	border: 3.5px solid #fff;
	border-right-color: #dcc182;
	border-radius: 100%;
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	animation: loader-spin 1s linear infinite;
	display: none;
}

@keyframes loader-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.main-video .thumbnail,
.main-video .iframe-wrapper {
	grid-column: 1 / -1;
	grid-row: 1 / -1;
}

.main-video .iframe-wrapper {
	display: none;
	z-index: 1;
}

/** main video **/

/** our story **/

.our-story {
	margin: 50px auto 0;
	height: 580px;
	display: grid;
	grid-template-columns: 13px 7px 1fr 7px 13px;
	grid-template-rows: 13px 7px 1fr 7px 13px;
}

.our-story .outer-border {
	grid-column: 2 / -2;
	grid-row: 2 / -2;
	border: 2px solid #dcc182;
}

.our-story .inner-border {
	grid-column: 3 / -3;
	grid-row: 3 / -3;
	border: 1px solid #dcc182;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

/** our story **/

/** instagram **/

.roladin-instagram {
	margin-top: 60px;
}

.roladin-instagram #instafeed {
	display: flex;
	justify-content: space-between;
	margin: 33px auto 0;
	align-items: center;
}

.roladin-instagram #instafeed li {
	flex-basis: 24.68%;
}

/*.roladin-instagram ul li a:hover {
background-color: rgba( 188, 180, 156, 0.7 );
}*/

.roladin-instagram ul li .post-info {
	opacity: 0;
}

/*.roladin-instagram ul li a:hover .post-info {
opacity: 1;
white-space: nowrap;
}*/

/** instagram **/

@media (max-width: 1365px) {

	/** welcome banner **/

	.welcome-banner,
	.swiper-wrapper .swiper-image-wrap
	{
		height: 425px;
	}

	.welcome-banner .message {
		margin: 0 58px 48px 0;
		padding: 3px;
		border: 1px solid #dcc182;
	}

	.welcome-banner .message > * {
		padding: 10px 15px;
	}

	/** welcome banner **/

	/** four cubes **/

	.four-cubes {
		height: 799px;
		margin-top: 36px;
		grid-gap: 8px;
	}

	.four-cubes .cube .name {
		padding: 1px;
		margin: 0 21px 21px 0;
	}

	.four-cubes .cube .name span {
		padding: 10px 13px;
	}

	/** four cubes **/

	/** main video **/

	.main-video {
		margin-top: 42px;
		height: 480px;
	}

	.main-video .play-icon img {
		max-width: 107px;
		max-height: 107px;
	}

	.main-video .play-icon .loader {
		border-width: 3px;
	}

	/** main video **/

	/** our story **/

	.our-story {
		margin-top: 36px;
		height: 435px;
		grid-template-columns: 10px 5px 1fr 5px 10px;
		grid-template-rows: 10px 5px 1fr 5px 10px;
	}

	.our-story .outer-border {
		border-width: 1px;
	}

	.our-story .inner-border > * {
		margin-top: 10px;
		padding: 0 15px;
		text-align: center;
	}

	/** our story **/

	/** instagram **/

	.roladin-instagram {
		margin-top: 44px;
	}

	.roladin-instagram #instafeed {
		margin-top: 25px;
	}

	/** instagram **/

}

@media (max-width: 1023px) {

	/** welcome banner **/

	.welcome-banner,
	.swiper-wrapper .swiper-image-wrap{
		height: 41.545vw;
	}

	.welcome-banner .message {
		margin-right: 5.6696vw;
		margin-bottom: 4.6921vw;
		margin: 0 5.6696vw 4.6921vw 0;
	}

	.welcome-banner .message > * {
		padding: 0.9775vw 1.4663vw;
	}

	/** welcome banner **/

	/** four cubes **/

	.four-cubes {
		height: 78.104vw;
		grid-template-rows: 1fr 7.333vw 1fr;
	}

	.four-cubes .cube .name {
		margin: 0 2.0528vw 2.0528vw 0;
	}

	.four-cubes .cube .name span {
		padding: 0.9775vw 1.4663vw;
	}

	/** four cubes **/

	/** main video **/

	.main-video {
		height: 46.921vw;
	}

	.main-video .play-icon img {
		max-width: 12vw;
		max-height: 12vw;
	}

	/** main video **/

	/** our story **/

	.our-story {
		height: 42.522vw;
	}

	/** our story **/

}

@media (max-width: 500px) {

	/** same height **/

	.four-cubes .cube,
	.main-video,
	.our-story {
		height: 250px;
	}

	.four-cubes .cube {
		height: 350px;
	}

	/** same height **/

	/** welcome banner **/

	.welcome-banner .message {
		margin-left: 5.6696vw;
	}

	/** welcome banner **/

	/** four cubes **/

	.four-cubes {
		grid-template-rows: 1fr;
		height: auto;
	}

	.four-cubes .cube {
		grid-column: 1 / -1;
		grid-row: unset;
		/*height: 250px;*/
	}

	.four-cubes .left-top{
		order: -1;
	}
	
	/** four cubes **/

	/** main video **/

	.main-video {
		/*height: 250px;*/
	}

	.main-video .play-icon img {
		max-width: 80px;
		max-height: 80px;
	}

	/** main video **/

	/** our story **/

	.our-story {
		/*height: 250px;*/
	}

	/** our story **/

	/** instagram **/

	.roladin-instagram #instafeed {
		flex-wrap: wrap;
	}

	.roladin-instagram #instafeed li {
		flex-basis: 49%;
	}

	.roladin-instagram #instafeed li:not(:nth-child(-n+2)) {
		margin-top: 2%;
	}

	/** instagram **/

}

/** small screen **/
/*
@media only all and ( max-width: 1000px ) {

.four-cubes {
height: 375px;
font-size: .8em;
}

.main-video {
height:360px;
}

.our-story {
height: 385px;
font-size: .6em;
text-align: center;
}

.our-story .inner-border a {
margin-top:3px;
}

.roladin-instagram #instafeed {
flex-wrap: wrap;
margin: 20px auto 0;
}

.roladin-instagram #instafeed li {
display: flex;
flex-direction: column;
flex-basis: 49%;
margin: 1% 0;
}

.main-video .play-icon img,
.main-video .play-icon .loader {
height:80px;
}

}

/** small screen **/