@charset "utf-8";

/* CSS Document */



/*play-hover*/

.video-play-button {

	position: relative;

	display: block;

	width: 52px;

	height: 52px;

	float: left;

	border: 3px solid #ffffff;

	border-radius: 50%;

	margin: 0 auto 0;

}

.video-play-button:after {

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

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

	display: block;

	width: 68px;

	height: 68px;

	background: rgba(255,255,255,0.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: 52px;

	height: 52px;

	background: rgba(255,255,255,0.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: 22px solid #ffffff;

	border-top: 13px solid transparent;

	border-bottom: 13px solid transparent;

	margin: 10px 16px;

}



 @-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;

}

}

/*scroll-effect1*/

.scroll-effect1 {

	width: 100%;

	height: 40px;

	background: url(../images/scroll-thumb1.svg) no-repeat center / cover;

	margin: 0 auto 0;

	position: relative;

	z-index: 99;

}

.scroll-effect1 a span {

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	width: 100%;

	height: 40px;

	box-sizing: border-box;

	margin: 0 0 0;

}

.scroll-effect1 a:after {

	content: "";

	width: 11px;

	height: 16px;

	background: url(../images/scroll-arrow1.svg) no-repeat center / 100% 100%;

	position: absolute;

	right: 0;

	bottom: -8px;

	left: 0;

	margin: auto;

}

.scroll-effect1 a:before {

	content: "";

	width: 5px;

	height: 9px;

	background: url(../images/scroll-dot1.png) no-repeat center / 100% 100%;

	position: absolute;

	top: -10px;

	right: 0;

	left: 0;

	margin: auto;

}

.scroll-effect1 a span::before {

	position: absolute;

	top: 10px;

	right: 0;

	left: -1px;

	content: '';

	width: 3px;

	height: 8px;

	margin: 0 auto 0;

	background: #1e1e1e;

	border: 1px solid #1e1e1e;

	border-radius: 50%;

	-webkit-animation: sdb10 2s infinite;

	animation: sdb10 2s infinite;

	box-sizing: border-box;

}




/*effect-css*/

.hovereffect {

  width: 360px;

  height: 100%;

  float: left;

  overflow: hidden;

  position: relative;

  text-align: center;

  cursor: pointer;

  background:#646867;

}



.hovereffect .overlay1 {

  position: absolute;

  overflow: hidden;

  width: 80%;

  left: 10%;

  bottom: 1%;

  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

  transition: opacity 0.35s, transform 0.35s;

  -webkit-transform: scale(0,1);

  -ms-transform: scale(0,1);

  transform: scale(0,1);

}



.hovereffect:hover .overlay1 {

  opacity: 1;

  filter: alpha(opacity=100);

  -webkit-transform: scale(1);

  -ms-transform: scale(1);

  transform: scale(1);

}



.hovereffect img {

  display: block;

  position: relative;

  -webkit-transition: all 0.35s;

  transition: all 0.35s;

}



.hovereffect:hover img {

	mix-blend-mode: multiply;

}



.hovereffect h3 {

  text-align: center;

  position: relative;

  font-size: 18px;

  background-color: transparent;

  color: #FFF;

  padding: 1em 0;

  opacity: 0;

  filter: alpha(opacity=0);

  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

  transition: opacity 0.35s, transform 0.35s;

  -webkit-transform: translate3d(0,-100%,0);

  transform: translate3d(0,-100%,0);

}



.hovereffect a, .hovereffect p {

  color: #FFF;

  padding: 1em 0;

  opacity: 0;

  filter: alpha(opacity=0);

  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

  transition: opacity 0.35s, transform 0.35s;

  -webkit-transform: translate3d(0,100%,0);

  transform: translate3d(0,100%,0);

}



.hovereffect:hover a, .hovereffect:hover p, .hovereffect:hover h3 {

  opacity: 1;

  filter: alpha(opacity=100);

  -webkit-transform: translate3d(0,0,0);

  transform: translate3d(0,0,0);

}



@-webkit-keyframes sdb10 {

 0% {

 -webkit-transform: translate(0, 0);

 opacity: 0;

}

 40% {

 opacity: 1;

}

 80% {

 -webkit-transform: translate(0, 10px);

 opacity: 0;

}

 100% {

 opacity: 0;

}

}

@keyframes sdb10 {

 0% {

 transform: translate(0, 0);

 opacity: 0;

}

 40% {

 opacity: 1;

}

 80% {

 transform: translate(0, 10px);

 opacity: 0;

}

 100% {

 opacity: 0;

}

}

/* Square-effect */

.square-effect1 {

  background: #000000;

  background: -moz-linear-gradient(-45deg, #000000 0%, #000000 25%, #1a204f 50%, #25308c 75%, #3c4bbe 100%);

  background: -webkit-linear-gradient(-45deg, #000000 0%, #000000 25%, #1a204f 50%, #25308c 75%, #3c4bbe 100%);

  background: linear-gradient(135deg, #000000 0%, #000000 25%, #1a204f 50%, #25308c 75%, #3c4bbe 100%);

  background-size: 400% 400%;

  background-repeat: no-repeat;

  position: relative;

  cursor: pointer;

  transition: .5s all;

  overflow: hidden;

}

.square-effect1:hover {

  background-position: 100% 100%;

}

.square-effect1 .square-bar1 {

  width: 100%; 

  float: left;

  overflow: hidden;

  position: relative;

  mix-blend-mode: screen;

}

.square-effect1 .square-bar1 img {

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

}

.square-effect1:hover .square-bar1 img {

  transform:scale(1.08);

  transition:all 1.5s ease 0s;

}

/*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) {



}



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



}



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



}