body {
	 font-family:'nunito';
	 background:#000000;
}

section {padding:16vh 0;}
@media screen and (max-width: 480px) {section {padding:60px 0;}}

h1 {font-weight:700;font-family:'poppins';font-size:2.8vw;}
h2 {font-size:2.2vw;font-weight:500;font-family:'poppins';}
h3 {font-size:2vw;font-weight:500;font-family:'poppins';}
h4 {font-size:1.75vw;font-weight:500;font-family:'poppins';}
h5 {font-size:1.5vw;font-weight:500;font-family:'poppins';}
P {font-size:1.2vw;}
.judul {font-size:4vw;}

@media screen and (max-width: 480px) {
	h1 {font-size:20pt;}
	h2 {font-size:18pt;}
	h3 {font-size:16pt;}
	h4 {font-size:14pt;}
	h5 {font-size:12pt;}
	p {font-size:12pt;}
	.judul {font-size:20pt;}
}

li {font-size:1.2vw;padding-bottom:0.5em;padding-top:0.5em;}
@media screen and (max-width: 480px) {li {font-size:12pt;}}

/* class */
.row {margin:auto;}
.container-fluid {padding-left:0;padding-right:0;}

.centered {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}

.grow:hover {transition:0.5s;transform: scale(1.05);}

.text-1 {
	color:#1D3557;
}

.text-2 {
	color:#457B9D;
}

.text-3 {
	color:#A8DADC;
}

.text-4 {
	color:#F1FAEE;
}

.text-5 {
	color:#E63946;
}

.bg-1 {
	background-color:#8ECAE6;
}

.bg-2 {
	background-color:#219EBC;
}

.bg-3 {
	background-color:#023047;
}

.bg-4 {
	background-color:#FFB703;
}

.bg-5 {
	background-color:#FB8500;
}

.bg-6 {
	background-color:#E63946;
}

#grow {
  overflow: hidden;            /* clip the excess when child gets bigger than parent */
	border-radius:0.5em;
	border:3px solid #ffffff20;
	box-shadow:0px 0px 10px #00000030;
}
#grow img {
  display: block;
  transition: transform .4s;   /* smoother zoom */
  
}
#grow:hover img {
  transform: scale(1.15);
  transform-origin: 50% 50%;
}

.timer {
    text-align: center;
    font-size: 20pt;
    font-family: montserrat;
    display: block;
    font-weight: 700;
    line-height: 18pt;
	color:#457B9D;
}

.timer2 {
    text-align: center;
    padding: 5px;
    background-color: #ffffff;
    color: #A8DADC;
    border-radius: 5px;
    font-size: 10pt;
    font-family: montserrat;
    display: block;
    box-shadow: inset 0 0 10px #00000010;
}

.vidisplay {
	width:100%;
	border-radius:0.1em;
	border:3px solid #303030;
	box-shadow:0px 0px 10px #00000030;
}

.play-btn {
	width:7vw;
	opacity: 0.8;
	box-shadow: 0px 0px 10px #00000050;
	border-radius: 100%;
	padding:0;
}
@media screen and (max-width: 480px) {
	.play-btn {width:24vw;}
}
.play-btn:hover {
	transition:0.5s;
	opacity: 1;
    box-shadow: 0px 0px 60px #000000;
}

.judul-video {
	color: #ffffff;
    background-color:#dc3545;
    padding: 0 10px;
    border-radius: 5px;
}
	
/* id */
#modulganjil {
	background-color:#03273f;
	color:#3ebaff;
}
#modulgenap {
	background-color:#edf0f5;
	color:#457B9D;
}

/* animation */
@keyframes blink {
	0% {box-shadow:0 0 0px;}
	100% {box-shadow:0 0 10px;}
}

@keyframes grow {
	0% {}
	100% {transform:scale(1.05);}
}

@keyframes goyang {
	0% {top:0px;left:0px;}
	50% {top:10px;left:10px;}
	100% {top:20px;left:0px;}
}


/* button style */



html {
  scroll-behavior: smooth;
}

/* width */
::-webkit-scrollbar {
  width:;
}

/* Track */
::-webkit-scrollbar-track {
  background: #ffeffa; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #958cab; 
  border-radius:3px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ff0; 
}