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

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:3vw;}

@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:#1D3557;
}

.bg-2 {
	background-color:#457B9D;
}

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

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

.bg-5 {
	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.5em;
	border:3px solid #E63946;
	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 {
	margin-bottom:1em;
	color:#0a132a;
	font-family:'open sans';
}
	
/* id */
#modulganjil {
	color:#457B9D;
	background-color:#F1FAEE;
	background-image:url(https://jv.beastgraph.com/nextlevel/preview/img/bg2.png);
	background-attachment:fixed;
}
#modulgenap {
	background-color:#A8DADC;
	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;}
}