/*
Theme Name: Test
Author: buluk
Author URI: https://dmctours.id/
Description: tema editan buluk
Version: 1.0
Requires at least: 4.7
Requires PHP: 5.2.4
Text Domain: edit
Tags:Asik
*/


body{
	margin:0;
    padding:0;

}

/* Slide */
#slider {
  display: grid;
  position: relative;
  transition: top 1s;
}

.slide {
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  align-self: center;
  padding: 60% 2% 25% 2%;
  width: auto;
  margin-top: 0;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 10px 10px 0;
  user-select: none;
  z-index: 999999;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 10px 0 0 10px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
	color: #000;
}


/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2s;
  animation-name: fade;
  animation-duration: 2s;
}

@-webkit-keyframes fade {
  from {opacity: .8} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .8} 
  to {opacity: 1}
}

.wave {   
  padding: 30.2% 0% 0% 0%;
  position: absolute;
  width: 100%;
}

img{
  width: 100%;
  height: 100%;
  display: block;
}

.tagline{
	position: absolute;
	padding: 28% 5%;
	width: 25%;
	z-index: 999999;
}


/* navbar */
#navbar {
  background-image: linear-gradient(to right, rgba(53,173,246,1)5%, rgba(251,158,43,1)40%, rgba(216,255,101,1)100%);
  position: fixed;
  top: -50px;
  right: 0px;
  left: 0px;
  max-width: 100%;
  display: block;
  transition: top 0.3s;
  z-index: 999999;
}

#navbar a {
  font-family: 'Comfortaa', cursive;
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 15px;
}

#navbar a:hover {
  background-color: #fff;
  border-radius: 8px 8px 0px 0px;
  color: #000;

}

#navbar a:active {
  background-color: #fff;
  border-radius: 10px 10px 0px 0px;
  color: #000;
  font-weight: bold;
}

/* Body Style */

.second {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: -9;
	top: 0px;
	margin: 0px 10px 0px 0px;
}

.kemana {
  display: block;
  position: absolute;
  width: 80%;
  font-size: 24px;
  font-family: 'Noticia Text', serif;
  line-height: 20%;
  margin: 20.5% 0% 0 10%;
}

.kemanatext {
  margin: 0% 0% 0% 0%;
  font-size: 14px;
  font-family: 'Comfortaa', cursive;
  color: #ccf;
}

#ayo {
	animation: pulse 20s infinite;
}

@keyframes pulse {
	0%  {
		color: #000;}
	6%  {
		color: #fff;}
	12% {
		color: #000;}
	26% {
		color: #fff;}
	32%  {
		color: #000;}
	46% {
		color: #fff;}
	52%  {
		color: #000;}
	66% {
		color: #fff;}
	72%  {
		color: #000;}
	86% {
		color: #fff;}
	92%  {
		color: #000;}
	100%{
		color: #fff;}
}

#ayo:after {
	content: "";
	animation: spin 20s infinite;
}

@keyframes spin {
  0%   { content:"Bali?"; }
  20%  { content:"Lombok"; } 
  40%  { content:"Labuan Bajo!"; }
  60%  { content:"Bangkok"; }
  80%  { content:"Singapura"; }
  100% { content:"Hubungi kami"; }
}

/* Content Style */
#content {
	padding: 0% 5% 0% 5%;
}

.profil {
	display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 1rem;
	font-family: 'Comfortaa', cursive;
	font-size: 14px;
    color: #000;
}

.profil.title {
	display: block;
	grid-column: 12 / span 1;
	grid-row: 1 / span 1;
	place-self: center;
	text-align: center;
	font-weight: bold;
	color: #fff;
}

.profil.item {
	display: block;
	grid-column: 1 / span 4;
	grid-row: 2 / span 1;
	place-self: center;
	width: 60%;
}

.profil.itemtext {
	display: block;
	grid-column: 1 / span 4;
	grid-row: 3 / span 1;
	justify-self: center;
	align-self: start;
	text-align: center;
	font-size: 10px;
	line-height: 50%;
}

.profil.text {
	display: block;
	grid-column: 5 / span 8;
	grid-row: 2 / span 2;
	place-self: center;
}

.item a:hover {
    display: block;
	filter: sepia(50%);
}

.layanan {
	display: grid;
	position: relative;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 1rem;
	font-family: 'Comfortaa', cursive;
	font-size: 14px;
    color: #000;
}

.layanan.title {
	display: block;
	grid-column: 12 / span 1;
	grid-row: 1 / span 1;
	place-self: center;
	text-align: center;
	font-weight: bold;
	color: #fff;
	z-index: 999999;
}

.layanan.itemtext {
	display: block;
	grid-column: 1 / span 4;
	grid-row: 3 / span 1;
	justify-self: center;
	align-self: start;
	text-align: center;
	font-size: 10px;
	line-height: 50%;
}

.layanan.text {
	display: block;
	grid-column: 1 / span 6;
	grid-row: 2 / span 1;
	place-self: center;
	z-index:-1;
}

.layananitem1,.layananitem2,.layananitem3,.layananitem4 {
	display: block;
	grid-column: 7 / span 6;
	grid-row: 2 / span 3;
	justify-self: center;
	align-self: start;
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
	z-index:-1;
}

.wavex {   
  position: absolute;
  top: -2%;
  width: 100%;
  display: block;
  grid-column: 7 / span 6;
  grid-row: 2 / span 3;
  z-index:-1;
  transform: rotate(180deg);
}


.layananitem1 {
	animation:fadex 10s infinite;
	-webkit-animation:fadex 10s infinite;
} 
.layananitem2 {
	animation:fadexx 10s infinite;
	-webkit-animation:fadexx 10s infinite;
}
.layananitem3 {
	animation:fadexxx 10s infinite;
	-webkit-animation:fadexxx 10s infinite;
}
.layananitem4 {
	animation:fadexxxx 10s infinite;
	-webkit-animation:fadexxxx 10s infinite;
}
@keyframes fadex
{
  0%  	{ opacity: 1}
  25% 	{ opacity: 0}
  50% 	{ opacity: 0}
  75% 	{ opacity: 0}
  100% 	{ opacity: 1}
}
@keyframes fadexx
{
  0%  	{ opacity: 0}
  25% 	{ opacity: 1}
  50% 	{ opacity: 0}
  75% 	{ opacity: 0}
  100% 	{ opacity: 0}
}
@keyframes fadexxx
{
  0%  	{ opacity: 0}
  25% 	{ opacity: 0}
  50% 	{ opacity: 1}
  75% 	{ opacity: 0}
  100% 	{ opacity: 0}
}
@keyframes fadexxxx
{
  0%  	{ opacity: 0}
  25% 	{ opacity: 0}
  50% 	{ opacity: 0}
  75% 	{ opacity: 1}
  100% 	{ opacity: 0}
}

/* Footer Style */
#footer {
  display: grid;
  transition: bottom 1s linear;
  left: 0;
  bottom: 0;
  width: 100%;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  box-sizing: border-box;
  font-family: 'Comfortaa', cursive;
  font-size: 12px;
  margin: 0;
  line-height: 1.5;
}

.footertext {
	display: block;
	padding: 0% 5% 0% 5%;
	grid-column: 3 / span 8;
	grid-row: 3 / span 2;
	justify-self: start;
	align-self: end;
	z-index: 999999;
	color: #fff;
}
.footertext ul {
  list-style: none;
  padding-left: 0;
}

.footerlogo {
	display: block;
	grid-column: 1 / span 2;
	grid-row: 4 / span 1;
	padding: 0% 10% 5% 10%;
	justify-self: center;
	align-self: end;
	z-index: 999999;
}

.waves {   
  grid-column: 1 / span 12;
  grid-row: 1 / span 2;
  margin-bottom: -5%;
  width: 100%;
  display: block;
  align-self: end;
}

.boxbot {
  grid-column: 1 / span 12;
  grid-row: 2 / span 3;
  display: block;
  width: 100%;
  height: 150px;
  justify-self: end;
  align-self: end;
  background-image: linear-gradient(to right, rgba(53,173,246,1)5%, rgba(251,158,43,1)40%, rgba(216,255,101,1)100%);
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 800px) {
  #navbar a {padding: 6px; font-size: 12px;}
  .kemana {font-size: 14px; margin: 20% 0% 0 10%;}
  .kemanatext {font-size: 12px; margin: 0% 0% 0 0%;}
  .profil.item {width:200px; grid-area: 2 / 1 / span 1 / span 12;}
  .profil.itemtext {grid-area: 3 / 1 / span 1 / span 12;}
  .profil.text {grid-area: 4 / 1 / span 1 / span 12;}
  .layanan.text {grid-area: 2 / 1 / span 1 / span 12;}
  .layananitem1,.layananitem2,.layananitem3,.layananitem4 {grid-area: 3 / 1 / span 1 / span 12;}
  .wavex {top: -3px; grid-area: 3 / 1 / span 1 / span 12;}
  .footertext {font-size: 10px; grid-area: 3 / 1 / span 1 / span 12;}
  .footerlogo {grid-area: 3 / 11 / span 1 / span 2;	padding: 0% 5% 5% 5%;}
  .boxbot {height: 135px;}  
}
@media only screen and (max-width: 400px) {
  .kemana {font-size: 10px; margin: 22%% 0% 0 5%;}
  .kemanatext {font-size: 8px; margin: 0% 0% 0 0%;}
}