/*TEMPLATE FLOW*/
.template-flow-container{
    height: 300px;
    margin-bottom: 40px;
}
.template-flow{

}
.template-set{
	position: relative;
}
.template-set ul{
	position: relative;
}
.temp-item video{
	height: 300px;
	width: auto;
	border-radius: 10px;
}

.temp-item img{
	height: 300px;
	width: auto;
	border-radius: 10px;
}

.temp-item{

    position: absolute;
    transition: transform ease-out .2s, z-index ease .2s;
    /* border: 1px solid #ffffff; */
    /*box-shadow: 0 0 12px 0px rgb(20 115 104);*/
}

/*@media (hover: hover) and (pointer: fine){
	.temp-item:hover{
		transform: scale(1.2);
		z-index: 100;
	animation-play-state:paused;
	  cursor: pointer;
	}
}*/

.temp1{
	top:0px;
	left:0px;

}
.temp2{
	top:0px;
	left:553px;

}
.temp3{
	top:0px;
	left:873px;

}
.temp4{
	top:0px;
	left:1193px;

}
.temp5{
	top:0px;
	left:1746px;

}

.w-1-1{width: 300px;}
.w-9-16{width: 169px;}
.w-16-9{width: 534px;}

.temp-item-txt{
    color: #ffffff;
    display: block;
    position: absolute;
    bottom: 0px;
    vertical-align: top;
    text-align: left;
    padding: 5px 10px;
    width: 100%;
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    text-shadow: 0px 0px 8px #000000;
    background-color: rgba(0,0,0,0.5);
    box-sizing: border-box;
	display: none;
}

@media (hover: hover) and (pointer: fine){
	.template-flow:hover{
		animation-play-state:paused;
	}
}

.slider-panel{
	position: absolute;
	top:0;
	width: 28%;
	height: 300px;
	display: flex;
background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,0) 100%);

}

.panel-right{
	right: 0;
background: rgb(255,255,255);
background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,0) 100%);
}
.slider-panel .panel-txt{
	font-size: 16px;
	line-height: 22px;
    font-weight: 600;
	text-transform: uppercase;
    color: #FFFFFF;
    width: 150px;
    padding: 70px 20px;
    text-align: left;
	background: linear-gradient(180deg, rgb(23 85 225) 0%, rgb(40, 28, 186) 100%);

    margin: auto 0;
	opacity: 0.8;
	/*border-top-left-radius: 150px;*/
    border-top-right-radius: 150px;
    border-bottom-right-radius: 150px;
    /*border-bottom-left-radius: 150px;*/

	box-shadow: 0px 2px 8px rgb(0 0 0 / 20%);
}
.panel-right .panel-txt{
	right: 0;
	text-align: right;
	margin-left: auto;
	background: linear-gradient(180deg, rgb(8 195 199) 0%, rgb(59 212 99) 100%);
	border-top-left-radius: 150px;
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  border-bottom-left-radius: 150px;

}