.backg {
    background:url('https://ppdb.alwildan.sch.id/12063968_4861242.webp') no-repeat;
    background-size: cover;
    background-position:center center;
    background-attachment: fixed;
}

#tooltip {
  position: relative;
  display: inline-block;
}

#tooltip .tooltiptext {
  visibility: hidden;
  width: auto;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}

#tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

#tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
.modaler {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 8; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
.modal-contenter {
  margin: auto;
  display: block;
  width: 100%;
  max-width: 700px;
}
.modal-contenter, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}
@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}
.closer {
  position: absolute;
  top: 60px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
.closer:hover,
.closer:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

    .bodylotion
    {
    background:url(../images/bg_ais.jpg) no-repeat center fixed;
    }
.hoy:hover {
  transform: scale(1.05);
}
    .w3-animate-left{position:relative;animation:animateleft 0.8s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
    .w3-animate-right{position:relative;animation:animateright 0.8s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
    .w3-animate-rightt{position:relative;animation:animateright 0.9s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
    .w3-animate-righttt{position:relative;animation:animateright 1s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
    
div.scrollmenu {
  background: rgb(50,85,186);background: linear-gradient(66deg, rgba(50,85,186,1) 0%, rgba(7,182,166,1) 100%);
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  padding-top:27px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #206bc4;
}

.modal {
  display: block;
  position: fixed;
  z-index: 1;
  padding-top: 70px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 95%;
  border-radius:8px;
  max-width:1000px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 2px 16px;
  background-color: #0daae8;
  color: white;
  text-align: center;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}


.navPanelToggle {
		position: fixed;
		text-decoration: none;
		height: 2em;
		right: 3em;
		top: .15em;
		width: 4em;
		display: none;
		z-index: 10002;
	}

		.navPanelToggle:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			font-family: FontAwesome;
			font-style: normal;
			font-weight: normal;
			text-transform: none !important;
			color: #fff;
			display: block;
			font-size: 16px;
			height: 2.25em;
			left: 0.5em;
			line-height: 2.25em;
			position: absolute;
			text-align: center;
			top: 0.5em;
			width: 3.5em;
		}

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

			.navPanelToggle {
				display: block;
			}

		}

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

			.navPanelToggle {
				right: 1em;
			}

		}

		.navPanelToggle *:before {
			color: #fff;
			display: block;
			font-size: 16px;
			height: 2.25em;
			left: 0.5em;
			line-height: 2.25em;
			position: absolute;
			text-align: center;
			top: 0.5em;
			width: 3.5em;
		}

	#navPanel {
		-moz-transform: translatex(20em);
		-webkit-transform: translatex(20em);
		-ms-transform: translatex(20em);
		transform: translatex(20em);
		-moz-transition: -moz-transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
		-webkit-transition: -webkit-transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
		-ms-transition: -ms-transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
		transition: transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
		-webkit-overflow-scrolling: touch;
		visibility: hidden;
		overflow-y: auto;
		position: fixed;
		right: 0;
		top: 0;
		background: #0000fe;
		color: #fff;
		height: 100%;
		max-width: 80%;
		width: 20em;
		padding: 1.5em;
		text-transform: uppercase;
		z-index: 10003;
		display: none;
	}

		#navPanel.visible {
			-moz-transform: translatex(0);
			-webkit-transform: translatex(0);
			-ms-transform: translatex(0);
			transform: translatex(0);
			box-shadow: 0 0 1.5em 0 rgba(0, 0, 0, 0.2);
			visibility: visible;
		}

		#navPanel a:not(.close) {
			border-top: solid 1px rgba(255, 255, 255, 0.1);
			color: #fff;
			font-weight: 700;
			display: block;
			padding: 0.75em 0;
			text-decoration: none;
		}

			#navPanel a:not(.close):first-child {
				border: none;
			}

		#navPanel .close {
			text-decoration: none;
			-moz-transition: color 0.2s ease-in-out;
			-webkit-transition: color 0.2s ease-in-out;
			-ms-transition: color 0.2s ease-in-out;
			transition: color 0.2s ease-in-out;
			-webkit-tap-highlight-color: transparent;
			border: 0;
			color: #484848;
			cursor: pointer;
			display: block;
			height: 4em;
			padding-right: 1.25em;
			position: absolute;
			right: 0;
			text-align: right;
			top: 0;
			vertical-align: middle;
			width: 5em;
		}

			#navPanel .close:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				font-family: FontAwesome;
				font-style: normal;
				font-weight: normal;
				text-transform: none !important;
				content: '\f00d';
				width: 3em;
				height: 3em;
				line-height: 3em;
				display: block;
				position: absolute;
				right: 0;
				top: 0;
				text-align: center;
			}

			#navPanel .close:hover {
				color: inherit;
			}

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

			#navPanel {
				display: block;
			}

		}
.others {
    color:black
}

select[type=text], input[type=text], input[type=number], input[type=date], input[type=email]{
    border: none;border-bottom: 1.3px solid #e6e8e9;height:40px;
}

@media screen and (min-width: 601px) {
  div.phoneview { display: none; }
  div.laptopview { display: block; }
  div.contacted { position:fixed;bottom:44;right:44;z-index:2; }
  div.logined { position:fixed;bottom:100;right:44;z-index:2; }
}
@media screen and (max-width: 600px) {
  div.phoneview { display: block; }
  div.laptopview { display: none; }
  div.contacted { position:fixed;bottom:44;right:13;z-index:2; }
  div.logined { position:fixed;bottom:100;right:13;z-index:2; }
}