/*slide show*/
/*.wrapperchinh {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.slideshowchinh {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translateX(-50%);
}
.slideshow--hero {
  z-index: 3;
  left: 0;
  top: 50%;
  height: 85%;
  transform: translateY(-50%) skewY(-10deg);
  transform-origin: center;
  overflow: hidden;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);


}
.slideshow--hero .slideschinh {
  position: absolute;
  left: 0;
  top: -10%;
  width: 100vw;
  height: 100vh;
  animation: 11s slideshow-hero-mobile -3s infinite;
}
.slideshow--hero .slide1 {
  background-image: url(/img/slideshow/h1.jpg);
  animation: 20s slides-set-1 -0.1s infinite;
}
.slideshow--hero .slide2 {
  background-image: url(/img/slideshow/h2.jpg);
  animation: 20s slides-set-2 -0.1s infinite;
}
.slideshow--hero .slide3 {
  background-image: url(/img/slideshow/h3.jpg);
  animation: 20s slides-set-3 -0.1s infinite;
}
.slideshow--hero .slide4 {
  background-image: url(/img/slideshow/h4.jpeg);
  animation: 20s slides-set-3 -0.1s infinite;
}
.slideshow--hero .slide5 {
  background-image: url(/img/slideshow/h5.jpg);
  animation: 20s slides-set-3 -0.1s infinite;
}
@media (min-width: 600px) {
  .slideshow--hero {

    left: 50%;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
  }
  .slideshow--hero .slideschinh {
    top: 0;
    left: -25%;
    height: 100%;
    animation: 11s slideshow-hero -3s infinite;
  }
}
.slideshow--contrast {
  z-index: 1;
  width: 100%;
  height: 50%;
  transform: none;
}
.slideshow--contrast--before {
  left: 0;
}
.slideshow--contrast--before .slideschinh {
  width: 100vw;
}
.slideshow--contrast--after {
  z-index: 2;
  left: auto;
  right: 0;
}
.slideshow--contrast--after .slideschinh {
  width: 100vw;
  left: auto;
  right: 0;
}
.slideshow--contrast .slideschinh {
  animation: 14s slideshow-contrast -5s infinite;
}
.slideshow--contrast .slide1 {
  background-image: linear-gradient(to bottom, rgba(200, 200, 75, 0.25) 0, rgba(200, 75, 75, 0.5) 100%), url(https://source.unsplash.com/1000x750);
  animation: 20s slides-set-1 -0.2s infinite;
}
.slideshow--contrast .slide2 {
  background-image: linear-gradient(to bottom, rgba(200, 200, 75, 0.25) 0, rgba(200, 75, 75, 0.5) 100%), url(https://source.unsplash.com/1001x751);
  animation: 20s slides-set-2 -0.2s infinite;
}
.slideshow--contrast .slide3 {
  background-image: linear-gradient(to bottom, rgba(200, 200, 75, 0.25) 0, rgba(200, 75, 75, 0.5) 100%), url(https://source.unsplash.com/1002x752);
  animation: 20s slides-set-3 -0.2s infinite;
}
.slideshow--contrast .slide4 {
  background-image: linear-gradient(to bottom, rgba(200, 200, 75, 0.25) 0, rgba(200, 75, 75, 0.5) 100%), url(https://source.unsplash.com/1001x751);
  animation: 20s slides-set-2 -0.2s infinite;
}
.slideshow--contrast .slide5 {
  background-image: linear-gradient(to bottom, rgba(200, 200, 75, 0.25) 0, rgba(200, 75, 75, 0.5) 100%), url(https://source.unsplash.com/1002x752);
  animation: 20s slides-set-3 -0.2s infinite;
}
.slideshow--contrast--after {
  top: auto;
  bottom: 0;
}
.slideshow--contrast--after .slideschinh {
  animation: 13s slideshow-contrast -13s infinite;
}

.slideshow--contrast--after .slide1 {
  animation: 20s slides-set-1 infinite;
}
.slideshow--contrast--after .slide2 {
  animation: 20s slides-set-2 infinite;
}
.slideshow--contrast--after .slide3 {
  animation: 20s slides-set-3 infinite;
}
.slideshow--contrast--after .slide4 {
  animation: 20s slides-set-2 infinite;
}
.slideshow--contrast--after .slide5 {
  animation: 20s slides-set-3 infinite;
}
@media (min-width: 600px) {
  .slideshow--contrast {
    width: 50%;
    height: 100%;
  }
  .slideshow--contrast--after {
    top: 0;
    bottom: auto;
  }
  .slideshow--contrast--after .slideschinh {
    width: 50vw;
  }
}

.slideschinh,
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}


@keyframes slideshow-hero-mobile {
  0% {
    transform: scale(1) skewY(10deg);
  }
  50% {
    transform: scale(1.05) skewY(10deg);
  }
  100% {
    transform: scale(1) skewY(10deg);
  }
}
@keyframes slideshow-hero {
  0% {
    transform: scale(1) skewX(10deg);
  }
  50% {
    transform: scale(1.05) skewX(10deg);
  }
  100% {
    transform: scale(1) skewX(10deg);
  }
}
@keyframes slideshow-contrast {
  0% {
    transform: scale(1.05);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.05);
  }
}
@keyframes slides-set-1 {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  31% {
    opacity: 1;
    transform: scale(1);
  }
  34% {
    opacity: 0;
    transform: scale(1.05);
  }
  97% {
    opacity: 0;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes slides-set-2 {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }
  31% {
    opacity: 0;
    transform: scale(1.05);
  }
  34% {
    opacity: 1;
    transform: scale(1);
  }
  64% {
    opacity: 1;
    transform: scale(1);
  }
  67% {
    opacity: 0;
    transform: scale(1.05);
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}
@keyframes slides-set-3 {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }
  64% {
    opacity: 0;
    transform: scale(1.05);
  }
  67% {
    opacity: 1;
    transform: scale(1);
  }
  97% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}
@keyframes slides-set-4 {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }
  64% {
    opacity: 0;
    transform: scale(1.05);
  }
  67% {
    opacity: 1;
    transform: scale(1);
  }
  97% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}
@keyframes slides-set-5 {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }
  64% {
    opacity: 0;
    transform: scale(1.05);
  }
  67% {
    opacity: 1;
    transform: scale(1);
  }
  97% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}*/
/*slide show*/

/*banner*/
html {
  box-sizing: border-box;
  
}

*,
*:before,
*:after {
  box-sizing: inherit;
}


.c{
  position:relative;
  max-height:900px;
  /*float:left;*/
  width:100%;
  height:900px;
  /*overflow:hidden;*/
  /*overflow-y:auto;*/
  z-index:99;
}

.grid {
  width: 100%;
  max-width:50rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  flex-wrap: wrap;
}

.grid-block {
  width: 24%;
  /*min-height: 11.25rem;*/
  padding: 0.5rem;
}

.image-grid {
  top:0;
  position: absolute;
  animation: scroll 20s linear infinite;
  -webkit-transform: rotateX(45deg) rotateZ(45deg);
  transform: rotateX(45deg) rotateZ(45deg);
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

@keyframes scroll {
  0% { top: -900px; left: 0px; }
	100% { top: -1600px; left: 1000px; }
}


@media only screen and (max-width: 630px){
    .c{  max-height:500px;
           height:500px;
}
    @keyframes scroll {
  0% { top: -500px; left: 0px; }
	100% { top: -1200px; left: 600px; }
}
    .grid-block {
  width: 25%;
  /*min-height: 11.25rem;*/
  padding: 0;
}
}
@media only screen and (max-width: 350px){
   
    .grid-block {
  width: 26%;

}
}
.image-grid .tile-link:hover .tile-img {
  top: -0.5rem;
  left: -0.5rem;
}

.image-grid .tile-img {
  position: relative;
  top: 0;
  left: 0;
  -webkit-transition-property: opacity, top, left, box-shadow;
  transition-property: opacity, top, left, box-shadow;
}

.tile-link {
  display: block;
}

.tile-link:hover .tile-img {
  opacity: 1;
}

.tile-link:hover .tile-img-link {
  display: block;
}

.tile-link:hover .tile-img-link:hover .tile-img {
  opacity: 0.5;
}

.tile-img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 1;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 0.125s;
  transition-duration: 0.125s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}
.tile-link:hover .tile-img1 {
  box-shadow: 5px 5px rgba(244, 170, 200, 0.4),
    10px 10px rgba(244, 170, 200, 0.3), 15px 15px rgba(244, 170, 200, 0.2),
    20px 20px rgba(244, 170, 200, 0.1), 25px 25px rgba(244, 170, 200, 0.05);
}

.tile-link:hover .tile-img2 {
  box-shadow: 5px 5px rgba(45, 186, 233, 0.4), 10px 10px rgba(45, 186, 233, 0.3),
    15px 15px rgba(45, 186, 233, 0.2), 20px 20px rgba(45, 186, 233, 0.1),
    25px 25px rgba(45, 186, 233, 0.05);
}

.tile-link:hover .tile-img3 {
  box-shadow: 5px 5px rgba(214, 221, 244, 0.4),
    10px 10px rgba(214, 221, 244, 0.3), 15px 15px rgba(214, 221, 244, 0.2),
    20px 20px rgba(214, 221, 244, 0.1), 25px 25px rgba(214, 221, 244, 0.05);
}

.tile-link:hover .tile-img4 {
  box-shadow: 5px 5px rgba(82, 119, 192, 0.4), 10px 10px rgba(82, 119, 192, 0.3),
    15px 15px rgba(82, 119, 192, 0.2), 20px 20px rgba(82, 119, 192, 0.1),
    25px 25px rgba(82, 119, 192, 0.05);
}

.tile-link:hover .tile-img5 {
  box-shadow: 5px 5px rgba(138, 218, 245, 0.4),
    10px 10px rgba(138, 218, 245, 0.3), 15px 15px rgba(138, 218, 245, 0.2),
    20px 20px rgba(138, 218, 245, 0.1), 25px 25px rgba(138, 218, 245, 0.05);
}

.tile-link:hover .tile-img6 {
  box-shadow: 5px 5px rgba(203, 215, 193, 0.4),
    10px 10px rgba(203, 215, 193, 0.3), 15px 15px rgba(203, 215, 193, 0.2),
    20px 20px rgba(203, 215, 193, 0.1), 25px 25px rgba(203, 215, 193, 0.05);
}

.tile-link:hover .tile-img7 {
  box-shadow: 5px 5px rgba(91, 209, 250, 0.4), 10px 10px rgba(91, 209, 250, 0.3),
    15px 15px rgba(91, 209, 250, 0.2), 20px 20px rgba(91, 209, 250, 0.1),
    25px 25px rgba(91, 209, 250, 0.05);
}

.tile-link:hover .tile-img8 {
  box-shadow: 5px 5px rgba(145, 156, 196, 0.4),
    10px 10px rgba(145, 156, 196, 0.3), 15px 15px rgba(145, 156, 196, 0.2),
    20px 20px rgba(145, 156, 196, 0.1), 25px 25px rgba(145, 156, 196, 0.05);
}

.tile-link:hover .tile-img9 {
  box-shadow: 5px 5px rgba(188, 97, 129, 0.4), 10px 10px rgba(188, 97, 129, 0.3),
    15px 15px rgba(188, 97, 129, 0.2), 20px 20px rgba(188, 97, 129, 0.1),
    25px 25px rgba(188, 97, 129, 0.05);
}

.tile-link:hover .tile-img10 {
  box-shadow: 5px 5px rgba(4, 140, 231, 0.4), 10px 10px rgba(4, 140, 231, 0.3),
    15px 15px rgba(4, 140, 231, 0.2), 20px 20px rgba(4, 140, 231, 0.1),
    25px 25px rgba(4, 140, 231, 0.05);
}

/*-------------- */
/*-- Lightbox -- */
/*-------------- */
.lightbox {
position: fixed;
top: -100%;
width: 100%;
background: rgba(0,0,0,.7);
width: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
}

/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */

/*
.lightbox img {
margin: auto;
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
max-height: 0%;
max-width: 0%;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
transform: translate(2px);
} */

/* Styles the close link, adds the slide down transition */

a.lightbox-close {
display: block;
width:50px;
height:50px;
box-sizing: border-box;
background: white;
color: black;
text-decoration: none;
position: absolute;
top: -80px;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:before {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:after {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}

/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

.lightbox:target {
opacity: 1;
top: 0;
bottom: 0;
}

.lightbox:target img {
max-height: 100%;
max-width: 100%;
}

.lightbox:target a.lightbox-close {
top: 0px;
}

/*------------*/
/*--- Test ---*/
/*------------*/
.lightbox.flip-left-3d img,
.lightbox.flip-right-3d img,
.lightbox.flip-up-3d img,
.lightbox.flip-down-3d img,
.lightbox.flip-up-left-3d img,
.lightbox.flip-up-right-3d img,
.lightbox.flip-down-left-3d img,
.lightbox.flip-down-right-3d img {
  transition: all 500ms ease-out;
}

.lightbox.flip-left-3d img {
  transform: translate(-50%, -50%) perspective(1000px) rotateY(90deg);
}

.lightbox.flip-left-3d:target img,
.lightbox.flip-right-3d:target img {
  transform: translate(-50%, -50%) perspective(1000px) rotateY(0deg);
}

.lightbox.flip-right-3d img {
  transform: translate(-50%, -50%) perspective(1000px) rotateY(-90deg);
}

.lightbox.flip-up-3d img {
  transform: translate(-50%, -50%) perspective(1000px) rotateX(-90deg);
}

.lightbox.flip-up-3d:target img,
.lightbox.flip-down-3d:target img {
  transform: translate(-50%, -50%) perspective(1000px) rotateX(0deg);
}

.lightbox.flip-down-3d img {
  transform: translate(-50%, -50%) perspective(1000px) rotateX(90deg);
}

.lightbox.flip-up-left-3d img {
  transform: translate(-50%, -50%) perspective(1000px) rotateX(-90deg) rotateY(90deg);
}

.lightbox.flip-up-left-3d:target img,
.lightbox.flip-up-right-3d:target img,
.lightbox.flip-down-left-3d:target img,
.lightbox.flip-down-right-3d:target img {
  transform: translate(-50%, -50%) perspective(1000px) rotateX(0deg) rotateY(0deg);
}

.lightbox.flip-up-right-3d img {
  transform: translate(-50%, -50%) perspective(1000px) rotateX(-90deg) rotateY(-90deg);
}

.lightbox.flip-down-left-3d img {
  transform: translate(-50%, -50%) perspective(1000px) rotateX(90deg) rotateY(90deg);
}

.lightbox.flip-down-right-3d img {
  transform: translate(-50%, -50%) perspective(1000px) rotateX(90deg) rotateY(-90deg);
}

/*----*/
.lightbox,
.lightbox * {
  box-sizing: border-box;
}

.lightbox {
  position: fixed;
  z-index: 999;
  top: 15px;
  /*left: 15px;*/
  bottom: 15px;
  /*right: 15px;*/
  text-align: center;
  visibility: hidden;
}

.lightbox:before {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  bottom: -15px;
  right: -15px;
  transition: all 500ms ease-out;
}

.lightbox img {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 20px black;
  border: 5px solid white;
  max-width: 100%;
  max-height: 100%;
}

.lightbox:target {
  visibility: visible;
}

/*
.lightbox:target:before {
  background-color: rgba(255, 255, 255, 0.85);
}

.lightbox:target:before {
  background-color: rgba(255, 255, 255, 0.85);
}
*/

.lightbox .close {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 32px;
  height: 32px;
  background: black;
  box-shadow: 0px 0px 5px white;
}

.lightbox .close:before,
.lightbox .close:after {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  content: "";
  position: absolute;
  display: block;
  margin: auto;
  width: 32px;
  height: 0;
  border-top: 2px solid white;
  transform-origin: center;
}

.lightbox .close:before {
  transform: rotate(45deg);
}

.lightbox .close:after {
  transform: rotate(-45deg);
}

/*--------------------*/
/*-- Corner ribbons --*/
/*--------------------*/
#banner{
	background: #e465c3;
	border: double white;
	font-family: Arial;
  text-transform: uppercase;
	color: white;
	transform: rotateZ(-36deg);
	width: 320px;
	position: absolute;
	left: -70px;
	top: 50px;
	font-size: 15px;
  font-weight: bold;
	padding: 10px 0px;
	text-align: center;
	box-shadow: 0px 0px 20px #333;
}

/*------------------------*/
/*-- Social media icons --*/
/*------------------------*/
.wrapper{
	height: 50px;
	width: 200px;
	/*top: 0;*/
	bottom: 20px;
	/*left: 0;*/
	right: 0;
	margin: auto;
	position: absolute;
}
.icons{
	position: relative;
	right: 35px;
	bottom: 35px;

	
}
.left, .right, .top{
	transform-origin: 0 0;
}
.left{
	position: relative;
	height: 50px;
	width: 10px;
	transform: rotate(90deg) skewX(-30deg) scaleY(0.864);
	
}
.right{
	height: 10px;
	width: 50px;
	position: relative;
	bottom: 50px;
	transform: rotate(-30deg) skewX(-30deg) scaleY(0.864);
}
.top{
	height: 50px;
	width: 50px;
	position: relative;
	bottom: 60px;
	transform: rotate(210deg) skewX(-30deg) scaleY(0.864);
	
}

.shadow{
	height: 25px;
	width: 25px;
	top: 15px;
	right: 15px;
	background-color: transparent;
	transform: rotate(210deg) skewX(-30deg) scaleY(0.864);
	position: relative;

}
.icons>div{
	height: 0;
	width: 0;

}
.icon1 {
	position: relative;
	top: 100px;
	left: 500px;

}
.icon2{
	position: relative;
	top: 149.5px;
	left: 413.5px
}
.icon3{
	position: relative;
	top: 0px;
	left: 177.5px;
}
.icon4{
	position: relative;
	top: 50px;
	left: 110px;
}
.icon5{
	position: relative;
	top: 298px;
	left: 155px;
}

.icon:hover{
	transform: translateY(-20px);
}
/*banner*/
/*cloud*/
#slides {
	position: relative;
	height: 100%;
	/*background-image: radial-gradient(
  circle at 50% 90%,
  #83ca7f,
  #02913e 79%,
  #14ff5c
 );*/
      /*background-image: linear-gradient(to bottom, #fff, #A6FFCB, #1FA2FF);*/
    
	overflow: hidden;
	box-sizing: border-box;
    z-index:98;
}
#slides::after {
   position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url("https://imgur.com/B2VVbTo.png");
	background-size: cover;
	animation: stars 40s linear infinite alternate;
}
#slides::before {
 position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url("https://imgur.com/OzQPJqM.png");
	background-size: cover;
	animation: stars 70s linear infinite alternate;
}

/*.cloudsWrapper:before,
.cloudsWrapper:after {
	position: absolute;
	content: "";
	display: block;
	height: 100%;
	min-width: 2560px;
	width: 100%;
	background-size: auto 100%;
	-webkit-animation: clouds linear infinite alternate;
	animation: clouds linear infinite alternate;
}

.clouds {
	position: absolute;
	width: 100%;
	bottom: 0;
}

.cloudsWrapper {
	position: absolute;
	overflow: hidden;
	top: -149px;
	height: 200px;
	width: 100%;
}
.cloudsWrapper:after {
	background: url("https://imgur.com/GaR2ZvO.png") bottom repeat-x;
	-webkit-animation-duration: 210s;
	animation-duration: 210s;
}
.cloudsWrapper:before {
	background: url("https://imgur.com/zYklUEb.png") bottom repeat-x;
	-webkit-animation-duration: 120s;
	animation-duration: 120s;
}




@keyframes stars {
	0% {
		-webkit-transform: rotate(-14deg);
		transform: rotate(-14deg);
	}
	100% {
		-webkit-transform: rotate(14deg);
		transform: rotate(14deg);
	}
}

@keyframes clouds {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	100% {
		-webkit-transform: translateX(-1000px);
		transform: translateX(-1000px);
	}
}*/




@keyframes wave {
  0% {
    transform: translateX(0) translateZ(0) scaleY(1)
  }
  50% {
    transform: translateX(-25%) translateZ(0) scaleY(0.55)
  }
  100% {
    transform: translateX(-50%) translateZ(0) scaleY(1)
  }
}
.box {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: -1px;
  /*opacity: 0.75;*/
  overflow: hidden;
  z-index: 100;
  /*background-image: linear-gradient(to bottom, #fff, #A6FFCB, #1FA2FF);*/
  /*background-image: linear-gradient(to left, #96fbc4 0%, #f9f586 100%);*/
  /*background-image: linear-gradient(to left, #ff0844 0%, #ffb199 100%);*/
  /*background-image: linear-gradient(to left, #f6d365 0%, #fda085 100%);*/
  /*background-image: linear-gradient(to left, #fbc2eb 0%, #a6c1ee 100%);*/
  /*background-image: linear-gradient(to left, #fcb69f 0%, #ffecd2 100%);*/
  /*background-image: linear-gradient(to left, #e0c3fc 0%, #8ec5fc 100%);*/
  /*background-image: linear-gradient(to left, #FFE29F 0%, #FFA99F 48%, #FF719A 100%);*/
  cursor: pointer;
}

.wave {
  position: absolute;
  width: 200%;
  height: 100%;
  left: 0;
  background-image: url('/img//wave.png');
  background-position: 0 bottom;
  transform-origin: center bottom;
  background-repeat: repeat no-repeat;
  background-size: 50% 120px;
}
.wave1 {
  position: absolute;
  width: 200%;
  height: 100%;
  left: 0;
  background-image: url("/img//wave1.png");
  background-position: 0 top;
  transform-origin: center top;
  background-repeat: repeat no-repeat;
  background-size: 50% 120px;
}
 
.wave:nth-child(1) {
  animation: wave 10s linear infinite;
}

.wave:nth-child(2) {
  animation: wave 20s linear infinite;
}

.wave:nth-child(3) {
  animation: wave 30s linear infinite;
}


/*cloud*/

/*gallery*/
.gallery-area .single-gallery{position:relative;overflow:hidden}
.gallery-area .single-gallery::before{position:absolute;top:0;left:0;right:0;height:100%;width:100%;content:"";background-color:rgba(1,10,28,0.3);opacity:0;z-index:1;-webkit-transition:all .4s ease-out 0s;-moz-transition:all .4s ease-out 0s;-ms-transition:all .4s ease-out 0s;-o-transition:all .4s ease-out 0s;transition:all .4s ease-out 0s}
.gallery-area .single-gallery:hover::before{opacity:1;visibility:visible}
.gallery-area .single-gallery .gallery-img{transform:scale(1.06);-webkit-transition:all .4s ease-out 0s;-moz-transition:all .4s ease-out 0s;-ms-transition:all .4s ease-out 0s;-o-transition:all .4s ease-out 0s;transition:all .4s ease-out 0s}
.gallery-area .single-gallery .big-img{position:relative;height:690px;background-size:cover;background-repeat:no-repeat}
.gallery-area .single-gallery .small-img{position:relative;height:330px;background-size:cover;background-repeat:no-repeat}
.single-gallery:hover .gallery-img{transform:scale(1)}
/*gallery*/

/*service*/
.services {
  width: 100%;
  background: #02913e; }
  .services .service {
    background: #02913e;
    text-align: center;
    padding: 30px;
    width: 100%;
    display: inline-block; }
    .services .service .icon-wrap {
      margin-bottom: 30px; }
      .services .service .icon-wrap > .fa {
           
    color: white;
        font-size: 50px;
        color: #fff;
        -webkit-transition: .3s all ease;
        -o-transition: .3s all ease;
        transition: .3s all ease; }
    .services .service h3 {
      position: relative;
      padding-bottom: 20px;
      font-size: 18px;
      color: #fff; }
      .services .service h3:before {
        position: absolute;
        content: "";
        width: 40px;
        height: 3px;
        left: 50%;
        bottom: 0;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        background: rgba(255, 255, 255, 0.2);
        -webkit-transition: .3s all ease;
        -o-transition: .3s all ease;
        transition: .3s all ease; }
    .services .service:hover {
      background: #fff; }
      .services .service:hover .icon-wrap .fa {
        color: #02913e; 
       
      }
    
      .services .service:hover h3 {
        color: #000; }
        .services .service:hover h3:before {
          background: #02913e; }
        /*service*/

        /*thong tin cong ty*/
        .site-section {
  padding: 2.5em 0; }
  @media (min-width: 768px) {
    .site-section {
      padding: 5em 0; } }
  .site-section.site-section-sm {
    padding: 4em 0; }
      /*thong tin cong ty*/

 
      /*---------------------
  hoadong
-----------------------*/
.slider-height{min-height:980px;background-repeat:no-repeat;background-position:center center;background-size:cover}
@media only screen and (min-width: 1200px) and (max-width: 1600px){.slider-height{min-height:750px}}
@media only screen and (min-width: 992px) and (max-width: 1199px){.slider-height{min-height:500px}}
@media only screen and (min-width: 768px) and (max-width: 991px){.slider-height{min-height:500px}}
@media only screen and (min-width: 576px) and (max-width: 767px){.slider-height{min-height:400px}}
@media (max-width: 575px){.slider-height{min-height:430px}}
.slider-height2{background-image:url(../img/hero/about_hero.png);min-height:500px;background-repeat:no-repeat;background-position:center center}
@media (max-width: 575px){.slider-height2{min-height:260px}}
.slider-area{overflow:hidden}
.slider-area .hero__img{position:relative}
@media (min-width: 1200px) and (max-width: 1400px){.slider-area .hero__img{left:-104px}}
@media only screen and (min-width: 992px) and (max-width: 1199px){.slider-area .hero__img img{height:500px}}
@media only screen and (min-width: 768px) and (max-width: 991px){.slider-area .hero__img img{height:500px}}
@media only screen and (min-width: 576px) and (max-width: 767px){.slider-area .hero__img img{height:400px}}
.slider-area .hero__caption{overflow:hidden}
@media (max-width: 575px){.slider-area .hero__caption{padding-top:38px;padding-left:22px}}
.slider-area .hero__caption h1{text-transform:normal;font-size:50px;font-weight:700;line-height:1.2;margin-bottom:26px}
@media only screen and (min-width: 992px) and (max-width: 1199px){.slider-area .hero__caption h1{font-size:60px;line-height:1.2}}
@media only screen and (min-width: 768px) and (max-width: 991px){.slider-area .hero__caption h1{font-size:50px;line-height:1.2}}
@media only screen and (min-width: 576px) and (max-width: 767px){.slider-area .hero__caption h1{font-size:35px;line-height:1.2;margin-bottom:26px}}
@media (max-width: 575px){.slider-area .hero__caption h1{font-size:33px;line-height:1.2;margin-bottom:26px}}
.slider-area .hero__caption p{font-size:17px;line-height:1.6;font-weight:400;margin-bottom:39px;color:#212025;margin-bottom:60px;padding-right:50px}
@media only screen and (min-width: 576px) and (max-width: 767px){.slider-area .hero__caption p{padding-right:0px;margin-bottom:30px}}
@media (max-width: 575px){.slider-area .hero__caption p{margin-bottom:30px;padding-right:0px;margin-bottom:30px}}
.slider-area .hero-cap h2{font-size:70px;font-weight:700;text-transform:capitalize}
@media (max-width: 575px){.slider-area .hero-cap h2{font-size:28px}}
.slide-bg{background:#f0f0f2}
.slider-active button.slick-arrow{position:absolute;top:50%;left:80px;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);background:none;border:0;padding:0;z-index:2;opacity:0;visibility:hidden;height:60px;width:60px;border-radius:50%;cursor:pointer;background:#ff2020;-webkit-transition:.4s;-o-transition:.4s;transition:.4s}
.slider-active button.slick-arrow i{font-size:20px;line-height:60px}
.slider-active button.slick-next{left:auto;right:80px}
.slider-active button.slick-arrow .secondary-img{right:26px}
.slider-active button:hover img{opacity:0}
.slider-active button:hover .secondary-img{opacity:1}
.slider-active:hover button.slick-prev{left:100px}
@media only screen and (min-width: 1200px) and (max-width: 1600px){.slider-active:hover button.slick-next{right:20px}}
.slider-active:hover button{opacity:1;visibility:visible}
.slider-active button:hover{background:#002d5b}
.slider-active .secondary-img{position:absolute;opacity:0}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               @media only screen and (min-width: 1200px) and (max-width: 1600px){.slider-active:hover button.slick-prev{left:20px}}
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 @media only screen and (min-width: 992px) and (max-width: 1199px){.slider-active:hover button.slick-prev{left:auto;right:10px}}
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      .slider-active:hover button.slick-next{right:100px}
    /*---------------------
 hoatdong
-----------------------*/