@charset "utf-8";

/* CSS Document */



/*play-hover*/

.video-play-button {

	position: relative;

	display: block;

	width: 32px;

	height: 32px;

	float: left;

	border: 2px solid #ffffff;

	border-radius: 50%;

	margin: 0 13px 0 0;

}

.video-play-button:after {

	-webkit-transform: translateX(-50%) translateY(-50%);

	transform: translateX(-50%) translateY(-50%);

	display: block;

	width: 58px;

	height: 58px;

	background: rgb(201 159 124 / 60%);

	border-radius: 50%;

	-webkit-animation: pulse-border 1500ms ease-out infinite;

	animation: pulse-border 1500ms ease-out infinite;

}

.video-play-button:before {

	-webkit-transform: translateX(-50%) translateY(-50%);

	transform: translateX(-50%) translateY(-50%);

	display: block;

	width: 42px;

	height: 42px;

	background: rgb(201 159 124 / 60%);

	border-radius: 50%;

	-webkit-animation: pulse-border 1500ms ease-out infinite;

	animation: pulse-border 1500ms ease-out infinite;

}

.video-play-button:after, .video-play-button:before {

	content: "";

	position: absolute;

	z-index: 0;

	left: 50%;

	top: 50%;

	z-index: -9;

}

.video-play-button span {

	display: block;

	position: relative;

	z-index: 3;

	width: 0;

	height: 0;

	border-left: 11px solid #ffffff;

	border-top: 7px solid transparent;

	border-bottom: 7px solid transparent;

	margin: 7px 11px;

}

 @-webkit-keyframes pulse-border {

 0% {

 -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);

 transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);

 opacity: 1;

}

 100% {

 -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);

 transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);

 opacity: 0;

}

}

 @keyframes pulse-border {

 0% {

 -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);

 transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);

 opacity: 1;

}

 100% {

 -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);

 transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);

 opacity: 0;

}

}

/*bounce-effect1*/

.bounce {

	width: 100%;

	float: none;

	-moz-animation: bounce 4s infinite;

	-webkit-animation: bounce 4s infinite;

	animation: bounce 4s infinite;

	display: inline-block;

	margin: 0 auto 0;

}

/* Square-effect */

.square-effect1 {

	background: #000;

	background: -moz-linear-gradient(-45deg, #000000 0%, #000000 25%, #ed5a62 50%, #c99f7c 75%, #a1a4a7 100%);

	background: -webkit-linear-gradient(-45deg, #000000 0%, #000000 25%, #ed5a62 50%, #c99f7c 75%, #a1a4a7 100%);

	background: linear-gradient(135deg, #000000 0%, #000000 25%, #ed5a62 50%, #c99f7c 75%, #a1a4a7 100%);

	background-size: 400% 400%;

	background-repeat: no-repeat;

	display: flex;

	position: relative;

	cursor: pointer;

	overflow: hidden;

	transition: .5s all;

}

.square-effect1 img {

	transition: transform 0.8s ease-in-out 0s;

}

.square-effect1:hover img {

	transform: scale(1.08);

	transition: all 1.5s ease 0s;

}

.square-effect1 .square-bar1 {

	width: 100%;

	float: left;

	position: relative;

	mix-blend-mode: screen;

}

.square-effect1:hover {

	background-position: 100% 100%;

}

.square-effect2 {

	position: relative;

	cursor: pointer;

	overflow: hidden;

	transition: .5s all;

}

.square-effect2:hover:before {

	content: "";

	width: 72%;

	height: 72%;

	background: -moz-linear-gradient(-45deg, #f7f2f3 0%, #f29b9f 25%, #ed5a62 50%, #c99f7c 75%, #a1a4a7 100%);

	background: -webkit-linear-gradient(-45deg, #f7f2f3 0%, #f29b9f 25%, #ed5a62 50%, #c99f7c 75%, #a1a4a7 100%);

	background: linear-gradient(135deg, #f7f2f3 0%, #f29b9f 25%, #ed5a62 50%, #c99f7c 75%, #a1a4a7 100%);

	transform: rotate(45deg);

	margin: 0 auto 0;

	position: absolute;

	top: 14%;

	right: 0;

	left: 0;

}

.square-effect2 .square-bar2 {

	width: 100%;

	float: left;

	position: relative;

	mix-blend-mode: screen;

	z-index: 9;

}

/*fix-div*/

.bottomMenu {

    width: auto;

    z-index: 1;

    transition: all 1s;

    position: fixed;

    top: 50%;

	right: 0;

   -webkit-transform-origin: 100% 50%;

   -moz-transform-origin: 100% 50%;

   -ms-transform-origin: 100% 50%;

   -o-transform-origin: 100% 50%;

   transform-origin: 100% 50%;

   -webkit-transform: rotate(90deg) translate(50%, 50%);

   -moz-transform: rotate(90deg) translate(50%, 50%);

   -ms-transform: rotate(90deg) translate(50%, 50%);

   -o-transform: rotate(90deg) translate(50%, 50%);

   transform: rotate(90deg) translate(50%, 50%);

}

.hide {

    opacity:0;

    right:-100%;

}

.show {

    opacity:1;

    right:0;

}

/*map-color*/

.map-color {

	-webkit-filter: grayscale(100%);

	-moz-filter: grayscale(100%);

	-ms-filter: grayscale(100%);

	-o-filter: grayscale(100%);

	filter: grayscale(100%);

}



/*Smartphone css*/

@media screen and (max-width: 480px) {

}

 @media screen and (min-width:481px) and (max-width:600px) {

}

 @media screen and (min-width:601px) and (max-width:767px) {

}

 @media screen and (min-width:768px) and (max-width:900px) {

.video-play-button {

	width: 28px;

	height: 28px;

	margin: 0 7px 0 0;

}

.video-play-button span {

	border-left: 7px solid #ffffff;

	border-top: 5px solid transparent;

	border-bottom: 5px solid transparent;

}

}

 @media screen and (min-width:901px) and (max-width:1024px) {

.video-play-button {

	width: 30px;

	height: 30px;

	margin: 0 10px 0 0;

}

.video-play-button span {

	border-left: 9px solid #ffffff;

	border-top: 6px solid transparent;

	border-bottom: 6px solid transparent;

}

}

 @media screen and (min-width:1025px) and (max-width:1240px) {

}