@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap");





/* Basic */

	body, input, textarea, select {
		font-family: 'Merriweather', Georgia, serif !important;
		font-weight: 400;
		color: #757575;
		font-size:14px;
	}

	

		a:hover {
			text-decoration: none;
		}

	strong, b {
		font-weight: 700;
		color: #484d55;
	}


	em, i {
		font-style: italic;
	}




	p, ul, ol, dl, table, blockquote, form {
		margin-bottom: 2em;
	}

/* Container */

	.container {
		margin: 0 auto;
		max-width: 100%;
		width: 68em;
	}

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

			.container {
				width: 70em;
			}

		}

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

			.container {
				width: calc(100% - 300px);
			}

		}

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

			.container {
				width: calc(100% - 100px);
			}

		}

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

			.container {
				width: calc(100% - 40px);
			}

		}

		.ac{
			text-align: center;
		} 
		.white{
			color: white !important;
		} 
		.rd2{
			border-radius: 2px
		} 
		.mb10{
			margin-bottom: 10px;;
		} 
		.f18{
			font-size: 18px;
		} 
		.dip{
			display: inline-block;
		}

		.show{
			display: block;
		}

		
		#logo-akademia, #logo-mataakademia {
			width: 100%;
			text-align: center;
			position: absolute;
			top: 10em;
		}

		#logo-mataakademia h1 {
			font-weight: 900;
			text-transform: uppercase;
			color: #fff;
			font-size: 2em;
			letter-spacing: 0.25em;
		}

		#logo-mataakademia p {
			color: white;
			margin: 1.25em 0 2rem 0;
			display: block;
			font-size: 0.9em;
		}

		#logo-mataakademia .btn-description {
			background: #1b74c9;
			color: #fff;
			padding: 15px 20px;
			border-radius: 10px;
			margin: 10px 0 0;
			text-decoration: none;
		}


			
			.artikel-wrap,.artikel-kategori {
				display: flex;
			    flex-direction: column;
			    align-items: flex-start;
			    justify-content: space-around;
			    gap: 25px;
			    max-width: 900px;
			    margin: 0 auto;
			}
			
			.artikel-kategori {
				margin: 40px auto;
    			max-width: 900px;
    			font-size: 26px;
			}

			.artikel-kategori p{
				color: #242730;
				text-align: center;
				line-height: 1.5;
			}

			.artikel-item {
				display: flex;
				background: #F9F9F9;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				gap: 20px;
				width: 100%;
				border-radius: 10px;
				padding: 10px 20px;
				transition: .3s all;
			}
			.artikel-item:hover {
				box-shadow: 0 0 5px rgb(0,0,0,.5);
			}  
	
			.artikel-image {
				border-radius: 10px;
				object-fit: cover;
			}
			.artikel-desc {
				line-height: 1.5;
				color: #555;
				padding: 10px 10px 10px 0;
			}
			.artikel-desc h2 {
				font-size: 23px;

			}
			.artikel-desc p {
				font-size: 16px;
			}

			.artikel-info {
				margin: 10px 0;
				font-size: 14px;
			}

			.artikel-author{
				color: #555;

			}
		
			.badge-artikel {
				background: #D8DFEF;
			    color: #0c4879;
			    padding: 5px 10px;
			    border-radius: 5px;
			    margin: 0px 0px 15px 0px;
			    display: block;
			    width: fit-content;
			}

			.wrap-university {
				position: relative;
				top: 6px;
				background: white;
				color: #585858;
				left: 50%;
				transform: translateX(-50%);
				margin-top: -159px;
				padding: 2rem;
				max-width: 1200px;
				width: 1100px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
    		}

			.logo-university img {
				width: 10vw;   /* responsive size based on viewport */
				min-width: 80px;
				height: auto;
			}

			.content-university {
			flex: 1;
			margin: 0 2vw;
			}

			.content-university h1 {
				color: #242730;
				margin: 0;
				font-size: 2.2vw; /* scales with zoom */
			}

			.content-university p {
			margin-top: 1vw;
			font-size: 1vw;
			line-height: 1.5;
			}

		.side-university {
			text-align: right;
		}

		.side-university .count-university {
			font-size: 1.2vw;
			margin-bottom: 1vw;
			display: block;
		}

		.side-university a {
			background: #007bff;
			color: white;
			border: none;
			padding: 0.6em 1.4em;
			border-radius: 20px;
			cursor: pointer;
			font-size: 1vw;
			white-space: nowrap;
		}

		.side-university a:hover {
			background: #0056b3;
		}
		.wrapper-article{
			width: 800px;
			margin: 0px auto;
			padding-top: 250px;
		}
		.wrap-author{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40px 20px;
			color: #646464;
			flex-wrap: wrap;
			background-color: white;
			box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
			width: 100%;
			
		}

		.mataakademia-article{
			background: url(https://asset-1.tribunnews.com/img/chbrand/mataakademia/header-bg.jpg);
    		background-size: 100% 430px;
    		background-repeat: no-repeat;
		}

		.title-article{
			position: relative;
			
		}
		.content-title-article h1{
			margin: 0;
			font-size: 28px;
			color: #242730;
			font-weight: 400 !important;
			line-height: 50px;
			margin-bottom: 20px;
		}
		.author{
			margin: 2rem auto;
		}
		.author-left{
			display: flex;
			align-items: center;
			gap:20px;
		}
		.author-left small{
			color: #585858;
			display: block;
			margin-bottom: 5px;
		}
		.author-left h2{
			margin: 0;
			font-size: 22px;
			font-weight: bold;
			color: #333;
		}
		.author-left p {
			margin: 0;
			color: #444;
			font-size: 16px;
		}

		.author-right a{
			background: #007bff;
			color: white;
			border: none;
			padding: 0.6em 1.4em;
			border-radius: 20px;
			cursor: pointer;
			font-size: 16px;
			white-space: nowrap;
			text-decoration: none;
		}

		.author-img img{
			border-radius: 50%;
		}
		.content-left {
 
			}
		.container-article{
			margin: 0 auto;
			position: relative;
		}
		.article-wrap{
			margin-top: 2rem;
			display: flex;
			flex-flow: column;
			align-items: center;
		
		}
		.reaction{
			width: 80%!important;
			margin: 20px 40px 20px!important;
		}

		.imgfull{
			width: 100%!important
		}

		.article-wrap p{
			margin-top: 2rem;
			text-align: justify;
			color: #757575;
		}
		.content-author h1{
			color: #242730;
		}
		.content-author p{
			color: #242730;
		}
		


		.steps {
			max-width: 900px;
			margin: auto;
			text-align: center;
		}

		.steps-intro {
			font-size: 16px;
			margin-bottom: 10px;
		}

		.steps hr {
			width: 60%;
			margin: 20px auto;
			border: none;
			border-top: 1px solid #ddd;
		}

		/* Step layout */
		.step {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 40px 0;
			gap: 20px;
		}

		.step-img img {
			width: 300px;
			border-radius: 4px;
		}

		.step-text {
			display: flex;
			align-items: center;
			gap: 15px;
			text-align: left;
			font-size: 15px;
			line-height: 1.6;
			color: #555;
		}

		.step-text p{
			margin: 0 !important;
		}
		.step-number {
			font-size: 20px;
			font-weight: bold;
			margin-right: 10px;
			color: #333;
		}

		.step-text a {
			color: #1e4d8b;
			text-decoration: none;
			font-weight: 600;
		}

		.step-text a:hover {
			text-decoration: underline;
		}

/* XLarge */


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

		/* Basic */

			body, input, textarea, select {
				font-size: 12pt;
			}

	}

/* Large */

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

		/* Basic */

			body, input, select, textarea {
				font-size: 11pt;
				line-height: 1.5em;
				letter-spacing: 0.015em;
			}

		/* Wrapper */

			.wrapper {
				padding: 4em 0 7em 0;
			}



	}

	.mataakademia-header-container{
		width: 800px;
		margin: 0 auto;
    	text-align: center;
	}

	.mataakademia-header-container img{
		margin-bottom: 20px;
		width: 422px;
    height: 172px;
	}

	.mataakademia-header-container p{
		color: #fff;
	}

	.mataakademia-header {
		margin: 0 auto;
		width: 100%;
		padding-top: 200px;
    	padding-bottom: 200px;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: top center;
		background-image: url(https://asset-1.tribunnews.com/img/chbrand/mataakademia/header-bg.jpg);
	}

	.breadcrumb-akademia{
		display: flex;
	    gap: 20px;
	    position: relative;
	    margin-bottom: 20px;
	    color: #fff;
	}

	.breadcrumb-akademia li a{
		color: #fff;
	}


	@media screen and (min-width: 1900px) {
		.mataakademia-wrapper{
			position: relative;
			top: 50px;
		}
		.wrap-university{
			top:190px;
			width: 1200px;
		}
	}
	@media (min-width: 400px) {
			.main-menu{
				left: 0;
				transform: none;
			}
			.main-menu.fixed {
				width: 1200px;
			}
	}

	footer {
    margin: 5em auto 0;
    border: 1px solid rgba(0, 0, 0, .15);
    padding: 23px;
    width: calc(100vw - 20%);
}

	footer h5{
		font-size: 0.83em;
    	margin-bottom: 1rem;
	}

	footer h6{
		color: #999 !important;
    font-size: 0.65em;
	}