body
{
	font-family: 'Roboto', sans-serif;
	font-size: 10pt;
	background-color: #dae5ea;
}

#mobile-indicator{
	display: none;
}

@media screen and (min-width: 1000px) {
	.mt-15{
		margin-top: 15px;
	}

	.mb-15{
		margin-bottom: 15px;
	}

	.ml-15{
		margin-left: 15px;
	}

	.mr-15{
		margin-right: 15px;
	}

	.mt-10{
		margin-top: 10px;
	}

	.mb-10{
		margin-bottom: 10px;
	}

	.ml-10{
		margin-left: 10px;
	}

	.mr-10{
		margin-right: 10px;
	}

	.mt-5{
		margin-top: 5px;
	}

	.mb-5{
		margin-bottom: 5px;
	}

	.ml-5{
		margin-left: 5px;
	}

	.mr-5{
		margin-right: 5px;
	}

	.header-info
	{
		border-top: 1px solid #fe0000;
	}

	.header-info img{
		width: 150px;
		height: 150px;
		padding: 15px;
		margin-left: -7px;
	}

	.header-info .container
	{
		display: -webkit-flex;
		-webkit-flex-flow: row nowrap;
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
	}

	.header-text *
	{
		width: 100%;
		margin: 0;
		padding: 0;
	}

	.header-text h1,
	.header-text h3
	{
		font-family: 'Viga', sans-serif;
	}

	.header-text h1
	{
		font-weight: bold;
		font-size: 45pt;
	}

	.header-text h3
	{
		font-size: 16pt;
	}

	.header-text h5
	{
		font-family: 'Roboto', sans-serif;
		font-size: 14pt;
		letter-spacing: 10px;
	}

	.header-text
	{
		flex-grow: 1;
		height: 150px;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		background-image: url('../img/header.png');
		background-position: right;
		background-repeat: no-repeat;
		background-size: contain;
		color: #03172b;
	}

	header.header
	{
		background: #b0d4e3;
		background: -moz-linear-gradient(top, #b0d4e3 0%, #88bacf 100%);
		background: -webkit-linear-gradient(top, #b0d4e3 0%,#88bacf 100%);
		background: linear-gradient(to bottom, #b0d4e3 0%,#88bacf 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0d4e3', endColorstr='#88bacf',GradientType=0 );
		border-bottom: 2px solid #fe0000;
	}

	.top-menu
	{
		height: 30px;
	}

	.main-menu {
	    background-color: #add5e6;
	    height: 40px;
	    box-shadow: 0 0 5px -4px #000;
	}

	.secondary-menu
	{
		height: 30px;
	}

	nav ul{
		margin: 0px -7px;
		padding: 0;
		display: flex;
		flex-flow: row nowrap;
		list-style: none;
		color: #03172b;
	}

	nav ul ul{
		margin: 0;
		position: absolute;
		display: flex;
		flex-direction: column;
		width: 300px;
		visibility: hidden;
		background-color: #03172b;
		color: #fff;
		z-index: 100;
	}

	nav li a{
		display: block;
		padding: 0px 7px 0px 7px;
		text-decoration: none;
		color: inherit;
		white-space: nowrap;
		overflow: hidden;
		text-transform: uppercase;
		font-size: 9pt;
	}

	nav ul ul li a{
		text-transform: capitalize;
	}

	nav ul li:hover > ul{
		visibility: visible;
		transform-origin: 0 0;
		animation: down-menu .2s forwards;
	}

	nav ul li:hover{
		transition: .2s linear;
		background-color: #03172b;
		color: #fff;
	}

	nav ul li a:hover{
		transition: .2s linear;
		color: #fff;
		text-decoration: none;
	}

	nav ul ul li:hover{
		transition: .2s linear;
		background-color: #fe0000;
		color: #03172b;
	}

	nav ul ul li a:hover{
		transition: .2s linear;
		color: #03172b;
	}

	i.circle {
	    display: inline-block;
	    width: 7px;
	    height: 7px;
	    background-color: #fe0000;
	    border-radius: 50%;
	    vertical-align: middle;
	    margin-left: 5px;
	}

	nav.top-menu ul li,
	nav.secondary-menu ul li{
		height: 30px;
	}

	nav.top-menu li a,
	nav.secondary-menu li a{
		height: 30px;
		line-height: 30px;
	}

	nav.main-menu ul li{
		height: 40px;
	}

	nav.main-menu li a{
		font-family: 'Viga', sans-serif;
		height: 40px;
		line-height: 40px;
		font-weight: lighter;
		font-size: 11pt;
		letter-spacing: 1px;
	}

	nav.main-menu ul ul li a{
		font-family: 'Roboto', sans-serif;
		font-size: 10pt;
		height: 40px;
		line-height: 40px;
		font-weight: normal;
		letter-spacing: normal;
	}


	.top-page{
		padding: 5px 0px;
	}

	.top-page .container
	{
		display: flex;
		flex-flow: row nowrap;
	}

	.top-page .akreditasi,
	.top-page .slider
	{
		height: 302px;
	}

	.top-page .akreditasi
	{
		width: 350px;
		height: 393px;
		flex-shrink: 0;
		background-color: #fff;
	}

	.akreditasi header{
		text-transform: uppercase;
		background-color: #8abbd0;
	}

	.akreditasi header h4{
		padding: 5px 10px;
		margin: 0px;
	}

	.top-page .slider{
		flex-grow: 1;
		position: relative;
		overflow: hidden;
	}

	.prodi .item {
	  display: flex;
	  flex-flow: row nowrap;
	  margin-bottom: 1px;
	}

	.peringkat {
	  width: 60px;
	  flex-shrink: 0;
	  height: 70px;
	  line-height: 60px;
	  text-align: center;
	  font-size: 30pt;
	  background-color: #8abbd0;
	  color: #fff;
	  font-weight: bold;
	  font-family: 'Viga', sans-serif;
	}

	.peringkat-ban {
	  width: 60px;
	  flex-shrink: 0;
	  height: 60px;
	  line-height: 60px;
	  text-align: center;
	  font-size: 10pt;
	  background-color: #8abbd0;
	  color: #fff;
	  font-weight: bold;
	  font-family: 'Viga', sans-serif;
	}

	.info * {
	  margin: 0px;
	}

	.info {
	  display: flex;
	  flex-flow: column nowrap;
	  justify-content: center;
	  flex-grow: 1;
	  padding: 3px;
	  border: 2px solid #8abbd0;
	  border-left: none;
	  background-color: #fff;
	}

	.prodi {
	  padding: 5px;
	}

	.prodi a {
	  text-decoration: none;
	  color: #200780;
	}

	.peringkat figure {
	    width: 100%;
	    height: 100%;
	    display: flex;
	    flex-flow: row nowrap;
	    align-items: center;
	    justify-content: center;
	}

	.peringkat figure img {
	    max-width: 70%;
	    max-height: 70%;
	}

	.slide {
	  /* height: 300px;
	  width: 100%; */
	  position: relative;
		width: 100%;
		background-position: center;
		 background-repeat: no-repeat;
		 background-size: cover;
	}

	/* .slide-container {
	  position: absolute;
	  top: 0px;
	  width: 100%;
	  transition: 0.5s cubic-bezier(.68,-0.55,.27,1.55);
	  z-index: -1;
	}

	.slide figure {
	  height: 300px;
	  width: 100%;
	  display: flex;
	  flex-flow: row nowrap;
	  align-items: center;
	  justify-content: center;
	  background-color: #2b3235;
	} */

	.slide .caption {
	  position: absolute;
	  width: 100%;
	  bottom: 0px;
	  max-height: 150px;
	  padding: 15px;
	  background-color: rgba(0,0,0,0.3);
	  color: #fff;
	  font-size: 9pt;
	  text-align: center;
	}

	.slide figure img {
	  max-width: 100%;
	  max-height: 100%;
	}

	.slide .caption * {
	  margin: 0px;
	}


	.whiteboard {
	  width: 100%;
	  background-color: #fff;
	  display: flex;
	  flex-flow: row wrap;
	  padding: 15px;
	}

	.whiteboard .item {
		width: 350px;
		background-color: #fff;
		height: 80px;
		display: flex;
		flex-flow: row nowrap;
		flex-shrink: 0;
		text-decoration: none;
		color: #000;
	}

	.whiteboard .note {
		width: 80px;
		flex-shrink: 0;
		background-image: url("../img/memo.png");
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
		transition: .2s cubic-bezier(.68,-0.55,.27,1.55);
	}

	.whiteboard .isi-pengumuman {
	  flex-grow: 1;
	}

	.isi-pengumuman h4 {
	  margin: 0;
	}

	.note .bulan {
	  position: absolute;
	  display: block;
	  width: 100%;
	  top: 15px;
	  font-weight: bold;
	  letter-spacing: 2px;
	  text-align: center;
	  transform: rotate(-10deg);
	  font-size: 12pt;
	  left: -3px;
	}
	.note .tanggal {
	  display: block;
	  position: absolute;
	  width: 100%;
	  font-size: 15pt;
	  font-weight: bold;
	  text-align: center;
	  bottom: 15px;
	  transform: rotate(-10deg);
	}
	.isi-pengumuman {
	  padding-top: 10px;
	}
	.isi-pengumuman h4 {
	  font-size: 12pt;
	}

	.whiteboard .item:hover{
	  border-bottom: 1px solid #ccc;
	}

	.whiteboard .item:hover .note {
	  transform: rotate(10deg);
	}

	.whiteboard .item:hover .note {
	  transform: rotate(10deg);
	}

	.pengumuman header{
		padding: 5px 15px;
		background-color: #8abbd0;
	}

	.pengumuman header h4{
		margin: 0px;
	}

	.pengumuman header h4 a {
	  text-decoration: none;
	  color: #000;
	}

	.kategori-container {
	  background-color: #fff;
	  padding: 15px 0px;
	}
	.kategori-container header {
	  border-bottom: 1px solid #ccc;
	  /*! background-color: #8abbd0; */
	}
	.kategori-container header a {
	  text-decoration: none;
	  color: #000;
	}


	.artikel-container {
	  display: flex;
	  flex-flow: column nowrap;
	  /*! height: 100px; */
	}
	.artikel-container .artikel {
	  display: flex;
	  flex-flow: row nowrap;
	  margin: 5px 0px;
	  color: #000;
	  /*! padding: 5px 0px; */
	}
	.artikel-container .artikel figure {
	  width: 150px;
	  height: 100px;
	  flex-shrink: 0;
	  /*! margin-right: 10px; */
	  display: flex;
	  flex-flow: row nowrap;
	  align-items: center;
	  justify-content: center;
	  background-color: #000;
	}
	.artikel-container .artikel figure img {
	  max-width: 100%;
	  max-height: 100%;
	}
	.info-article h4 {
	  margin: 0px;
	}
	.time, .user {
	  font-size: 8pt;
	}
	.artikel-container .artikel:hover {
	  text-decoration: none;
	  background-color: whitesmoke;
	}
	.info-article {
	  padding: 5px;
	}


	.box-footer {
	  background-color: #450909;
	  color: #fff;
	  padding: 35px 0;
	  margin-top: 15px;
	}

	h1.header-kontak {
	  margin: 0 0 15px 0;
	  font-size: 16pt;
	}
	.konten-kontak p {
	  margin: 0;
	}
	p {
	}
	.konten-kontak label {
	  display: inline-block;
	  width: 100px;
	}
	.sosial-media {
	  display: flex;
	  flex-flow: row wrap;
	}

	.sosial-media a {
	  width: 60px;
	  height: 40px;
	  background-color: #fff;
	  background-repeat: no-repeat;
	  background-position: center;
	  background-size: 25px;
	  margin-right: 15px;
	  border-radius: 15px;
	  border-bottom-left-radius: 0px;
	}
	.quote h1 {
	  font-family: 'Lobster', cursive;
	  /*letter-spacing: 2px;*/
	}
	.quote {
	  padding-top: 15px;
	  padding-bottom: 15px;
	}
	.footer {
	  background-color: #000;
	  color: #fff;
	  padding: 15px 0;
	}

	.v-article {
	  margin-top: 10px;
	}

	.v-article .article {
	  background-color: #fff;
	  padding: 15px;
	  margin-bottom: 15px;
	  flex-grow: 1;
	}

	.article .title * {
	  margin: 0;
	  padding: 0;
	}

	.article .title h1 {
	  font-size: 18pt;
	  text-transform: uppercase;
	  margin-top: 15px;
	  margin-bottom: 15px;
	}

	.detail ul {
	  list-style: none;
	  display: flex;
	  flex-flow: row wrap;
	}

	.detail ul li {
	  font-size: 8pt;
	  margin-right: 15px !important;
	}

	.article .detail {
	  margin-bottom: 15px;
	}

	.box-sidebar {
	  background-color: #fff;
	  padding: 15px;
	  margin-bottom: 15px;
	}

	.box-sidebar .box-header {
	  font-size: 14pt;
	  text-transform: uppercase;
	  margin-top: 15px;
	  margin-bottom: 15px;
	}

	.content-sidebar ul {
	  display: flex;
	  flex-flow: column;
	  margin: 0;
	  padding: 0;
	  list-style: none;
	}

	.content-sidebar ul li {
	  margin-bottom: 5px;
	  border: 1px solid whitesmoke;
	  padding: 5px;
	}

	.kalender table {
	  width: 100%;
	}

	.article .content {
	  overflow: hidden;
	}

	.article .content img {
	  max-width: 100%;
	  /*! border: 1px solid #ccc; */
	  /*! padding: 2px; */
	  border-radius: 5px;
	}

	.v-article .container {
	  display: flex;
	  flex-flow: row nowrap;
	}
	
	.sidebar {
	  width: 250px;
	  flex-shrink: 0;
	  margin-left: 15px;
	}
	
	.this-page {
	  margin-top: 15px;
	  margin-bottom: 15px;
	}

	.this-page .page {
	  padding: 15px;
	  background-color: #FFF;
	  margin-bottom: 15px;
	}

	.page .title h1 {
	  margin: 15px 0;
	  font-size: 18pt;
	  text-transform: uppercase;
	}

	.page .content {
	  overflow: hidden;
	}

	.v-category {
	  margin-top: 10px;
	}

	.v-category .container {
	  display: flex;
	  flex-flow: row nowrap;
	}

	.category-page {
	  padding: 15px;
	  background-color: #FFF;
	  margin-bottom: 15px;
	  flex-grow: 1;
	}

	.page-title h1 {
	  margin-top: 15px;
	  margin-bottom: 15px;
	  font-size: 18pt;
	  text-transform: uppercase;
	}

	ul.article {
	  margin: 0;
	  padding: 0;
	  list-style: none;
	}

	ul.article li {
	  margin-bottom: 15px;
	}

	ul.article li a {
		color: #000;
		text-decoration: none;
		display: flex;
		flex-flow: row nowrap;
	}

	ul.article figure {
	  width: 200px;
	  height: 150px;
	  overflow: hidden;
	  flex-shrink: 0;
	  background-color: #000;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  margin-right: 15px;
	}

	ul.article .title h1 {
	  margin: 0;
	  padding: 0;
	  font-size: 14pt;
	  padding-bottom: 15px;
	}

	.v-pendaftaran {
	  margin-top: 10px;
	}

	.form-pendaftaran {
	  padding: 15px;
	  background-color: #fff;
	  margin-bottom: 15px;
	}

	.form-pendaftaran h1 {
	  margin: 15px 0;
	  font-size: 18pt;
	  text-transform: uppercase;
	}

	#map {
		width: 100%;
		height: 500px;
	}


	.v-map.v-page {
	  padding-top: 10px;
	  background-color: #FFF;
	}

	.v-page{
		margin-top: 10px;
	}

	.v-page .title h1 {
	  margin: 15px 0;
	  font-size: 18pt;
	  text-transform: uppercase;
	}

	.v-page-white{
		padding: 15px;
		background-color: #fff;
		margin-bottom: 15px;
	}


	.v-list {
	  display: flex;
	  flex-flow: row wrap;
	  justify-content: space-around;
	}

	.v-item {
	  flex-shrink: 0;
	  width: 48%;
	}

	
	.v-dosen-container {
	  display: flex;
	  flex-flow: row wrap;
	  justify-content: space-around;
	}

	.dosen-a:hover {
		text-decoration: none;
		color: #000;
	}

	.dosen-a {
	  width: 200px;
	  flex-shrink: 0;
	  margin: 5px;
	  position: relative;
	  border: 1px solid #ccc;
	  color: #000;
	  text-decoration: none;
	}
	.gelar {
	  position: absolute;
	  top: 0;
	  left: 0;
	  background-color: #fff;
	  padding: 5px;
	}
	.dosen-a figure {
	  width: 100%;
	  height: 200px;
	  overflow: hidden;
	  display: flex;
	  flex-flow: row wrap;
	  align-items: center;
	}

	.dosen-img {
	  max-width: 100%;
	  max-height: 100%;
	}

	.info-dosen{
		padding: 5px;
	}

	.detail-info {
	  display: flex;
	  flex-flow: row nowrap;
	  margin-bottom: 15px;
	  font-size: 14pt;
	}
	.detail-label {
	  width: 200px;
	  flex-shrink: 0;
	  text-align: right;
	  margin-right: 15px;
	}
	.detail-value {
	  flex-grow: 1;
	}

	.detail-info embed {
	  width: 100%;
	  background-color: #ccc;
	}

	.info-pejabat{
		height: 300px;
		padding: 30px 50px;
		background-color: #2b3235;
		margin-bottom: -15px;
		box-sizing: content-box;
		overflow: hidden;
	}

	.pejabat-container {
	  height: 100%;
	  width: 100%;
	  overflow-x: auto;
	  padding-bottom: 15px;
	}

	.pejabat-slider {
	  display: flex;
	  flex-flow: row nowrap;
	  height: 100%;
	  width: 100%;
	}

	.item-pejabat {
	  height: 100%;
	  width: 250px;
	  flex-shrink: 0;
	  margin-left: 7px;
	  margin-right: 7px;
	  position: relative;
	  padding: 5px;
	  background-color: #fff;
	  border-radius: 15px;
	  border-bottom-left-radius: 0;
	  box-shadow: 0px 0px 2px #450909;
	}
	.item-pejabat .img {
	  width: 100%;
	  height: 100%;
	  background-repeat: no-repeat;
	  background-size: cover;
	  background-position: top center;
	  border-radius: 12px;
	  border-bottom-left-radius: 0px;
	}
	.item-pejabat .keterangan {
	  position: absolute;
	  bottom: 5px;
	  left: 5px;
	  right: 5px;
	  padding: 10px;
	  background-color: rgba(30, 28, 28, 0.9);
	  border-bottom-right-radius: 12px;
	  color: #fff;
	}
	.nama_pejabat {
	  font-weight: bold;
	  font-size: 12pt;
	}
	.jabatan {
	  font-size: 8pt;
	  text-transform: uppercase;
	}
}

@media screen and (max-width: 999.5px) {
	#mobile-indicator{
		display: block;
	}

	body{
		background-color: #fff;
		padding-bottom: 50px;
	}

	.top-menu, .secondary-menu, .main-menu {
	  display: none;
	}
	.header-info img {
	  width: 100px;
	  height: 100px;
	  margin-bottom: 5px;
	}
	.header-info .container {
	  display: flex;
	  flex-flow: column nowrap;
	  align-items: center;
	  justify-content: center;
	  padding: 15px;
	}
	.header-text h3 {
	  font-size: 10pt;
	  font-weight: bold;
	  margin: 0px;
	}
	.header-text h1 {
	  font-size: 16pt;
	  font-weight: bold;
	  margin: 0px;
	  font-family: viga;
	}
	.header-text {
	  text-align: center;
	}
	.header-text h5 {
	  margin: 0px;
	  letter-spacing: 2px;
	}
	.header {
	  background-color: #b0d4e3;
	  border-bottom: 2px solid #fe0000;
	}

	.akreditasi header * {
	  margin: 0;
	}
	.akreditasi header {
	  margin-left: -15px;
	  margin-right: -15px;
	  margin-bottom: 15px;
	  padding: 15px;
	  background-color: whitesmoke;
	  border-bottom: 1px solid #ccc;
	}
	.prodi a:hover {
		text-decoration: none;
	}
	.prodi .item {
	  display: flex;
	  flex-flow: row nowrap;
	  margin-bottom: 15px;
	}
	.prodi .peringkat, .prodi .peringkat-ban {
	  width: 60px;
	  display: flex;
	  flex-flow: row nowrap;
	  align-items: center;
	  justify-content: center;
	  flex-shrink: 0;
	  background-color: #b0d4e3;
	  color: #fff;
	}

	.prodi .info {
	  flex-grow: 1;
	  padding-top: 5px;
	  padding-bottom: 5px;
	  padding-left: 10px;
	  border: 1px solid #b0d4e3;
	}
	.prodi * {
	  margin: 0;
	  color: #200780;
	}
	.prodi .peringkat {
	  font-size: 18pt;
	  font-weight: bold;
	  flex-shrink: 0;
	}

	.prodi .info h4 {
 	   font-size: 12pt!important;
	}

	.peringkat figure {
	    width: 100%;
	    height: 100%;
	    display: flex;
	    flex-flow: row nowrap;
	    align-items: center;
	    justify-content: center;
	}

	.peringkat figure img {
	    width: 40px;
	    height: auto;
	}

	.slide-container {
	    	position: absolute;
	    	transition: .2s cubic-bezier(0.52, 0.22, 0.58, 1);
	    	width: 100%;
	 }

	.slide {
	    height: 200px;
	    position: relative;
	}

	.slider {
	    position: relative;
	    height: 200px;
	    overflow: hidden;
	}

	.slide .caption {
	    position: absolute;
	    bottom: 0;
	    background-color: rgba(0,0,0,.4);
	    left: 0;
	    right: 0;
	    color: #fff;
	    padding: 5px;
	}

	.c-slider {
	    display: flex;
	    flex-flow: row wrap;
	    margin-top: 2px;
	}

	.btn-slider {
	    width: 30px;
	    height: 30px;
	    text-align: center;
	    line-height: 30px;
	    background-color: #ccc;
	    margin-right: 2px;
	    cursor: pointer;
	    font-weight: bold;
	}

	.btn-slider.selected {
	    background-color: #000;
	    color: #fff;
	}

	.top-page {
	    margin-bottom: 15px;
	}

	.pengumuman header {
	    margin-left: -15px;
	    margin-right: -15px;
	    padding: 15px;
	    margin-bottom: 15px;
	    background-color: whitesmoke;
	    border-bottom: 1px solid #ccc;
	}

	.pengumuman header * {
	    margin: 0;
	}

	.pengumuman header a {
	    color: #000;
	    border-bottom: 1px solid #428bca;
	}

	.whiteboard .item {
	    display: flex;
	    flex-flow: row nowrap;
	    margin-bottom: 5px;
	    color: #000;
	}

	.whiteboard .note {
	    width: 50px;
	    flex-shrink: 0;
	    height: 50px;
	    background-image: url("../img/memo.png");
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
	}

	.whiteboard .isi-pengumuman {
	    flex-grow: 1;
	    padding-left: 5px;
	    padding-top: 5px;
	}

	.whiteboard .isi-pengumuman * {
	    margin: 0;
	}

	.isi-pengumuman h4 {
	    font-size: 11pt;
	}

	span.bulan {
	    position: absolute;
	    transform: rotate(-10deg);
	    top: 8px;
	    left: 10px;
	    color: #000;
	    font-weight: bold;
	}

	span.tanggal {
	    position: absolute;
	    transform: rotate(-10deg);
	    top: 22px;
	    left: 18px;
	    color: #000;
	}

	.kategori-container .item header * {
	    margin: 0;
	}

	.kategori-container .item header {
	    margin-left: -15px;
	    margin-right: -15px;
	    margin-bottom: 15px;
	    padding: 15px;
	    background-color: whitesmoke;
	    border-bottom: 1px solid #ccc;
	}

	.kategori-container .item {
	    margin-left: -15px;
	    margin-right: -15px;
	}

	.pengumuman {
	    margin-bottom: 15px;
	}

	.kategori-container .item header a {
	    color: #000;
	    border-bottom: 1px solid #428bca;
	}

	.artikel-container .artikel {
	    display: flex;
	    flex-flow: row nowrap;
	    /* margin-bottom: 15px; */
	    color: #000;
	    padding: 8px 0;
	    border-bottom: 1px solid whitesmoke;
	}

	.artikel-container .artikel figure {
	    width: 100px;
	    height: 80px;
	    display: flex;
	    flex-flow: row nowrap;
	    align-items: center;
	    justify-content: center;
	    background-color: #000;
	    flex-shrink: 0;
	}

	.artikel-container .artikel figure img{
	    max-width: 100%;
	    max-height: 100%;
	}

	.artikel .info-article {
	    flex-grow: 1;
	    padding-left: 5px;
	}

	.artikel .info-article *{
	    margin: 0px
	}

	.artikel .info-article h4{
	    font-size: 12pt;
	    font-weight: bold;
	}

	.info-article span.time {
	    color: #0311d2;
	}

	.info-article span.user {
	    display: block;
	}

	.kategori-artikel {
	    margin-bottom: 15px;
	}

	.box-footer {
	    background-color: #450909;
	    color: #fff;
	    padding: 25px 0;
	}

	.box-footer .kontak {
	    /* padding: 25px 15px; */
	    margin-bottom: 15px;
	}

	h1.header-kontak {
	    font-size: 14pt;
	    margin: 0 0 15px 0;
	}

	.konten-kontak p label {
	    display: inline-block;
	    width: 100px;
	}

	.sosial-media {
	    display: flex;
	    flex-flow: row wrap;
	    justify-content: space-around;
	}

	.sosial-media a {
	    width: 60px;
	    height: 40px;
	    background-size: 30px;
	    background-repeat: no-repeat;
	    background-position: center;
	    background-color: #fff;
	    border-radius: 15px;
	    border-bottom-left-radius: 0px;
	    /* margin-right: 15px; */
	}

	.quote {
	    padding: 25px 0;
	    text-align: center;
	    font-family: Lobster, cursive;
	}

	.quote h1 {
	    font-family: inherit;
	}

	.footer {
	    padding: 15px 0px;
	    background-color: #000;
	    color: #fff;
	    text-align: center;
	}

	.v-page-white .title h1 {
	    margin: 0;
	    font-size: 16pt;
	    text-transform: uppercase;
	    margin-bottom: 15px;
	}

	.v-page-white .title {
	    margin: 0px -15px;
	    background-color: whitesmoke;
	    padding: 15px;
	    margin-bottom: 15px;
	}

	.v-page-white .detail ul {
	    display: flex;
	    flex-flow: row wrap;
	    justify-content: space-between;
	    list-style: none;
	    padding: 0;
	    margin: 0;
	    font-size: 10pt;
	    color: #0f0846;
	}

	.v-page-white .content {
	    margin-bottom: 15px;
	    overflow: auto;
	}

	.sidebar .box-sidebar {
	    margin-bottom: 15px;
	}

	.box-sidebar .box-header span {
	    font-size: 12pt;
	    text-transform: uppercase;
	}

	.box-sidebar .box-header {
	    margin-left: -15px;
	    margin-right: -15px;
	    padding: 15px;
	    background-color: whitesmoke;
	    margin-bottom: 15px;
	}

	.content-sidebar ul {
	    list-style: none;
	    margin: 0;
	    padding: 0;
	}

	.content-sidebar li {
	    padding: 5px 0px;
	    color: #000;
	}

	.content-sidebar li a {
	    color: inherit;
	}

	.content-sidebar.kalender table {
	    width: 100%;
	}

	.v-page-white.article .content img {
	    max-width: 100%;
	    max-height: 100%;
	    border-radius: 5px;
	}

	iframe {
		max-width: 100%;
	}

	.content * {
	    font-size: 11pt;
	    font-family: 'Roboto', sans-serif;
	}

	#map {
	    width: 100%;
	    height: 300px;
	}

	.v-page .title {
	    background-color: whitesmoke;
	    margin-left: -15px;
	    margin-right: -15px;
	    padding: 15px;
	    font-size: 16pt;
	    text-transform: uppercase;
	}

	.v-map .title h1 {
	    font-size: inherit;
	    margin: 0;
	    padding: 0;
	}

	.form-pendaftaran .title {
	    margin-left: -15px;
	    margin-right: -15px;
	    padding: 15px;
	    background-color: whitesmoke;
	}

	.form-pendaftaran h1 {
	    font-size: 16pt;
	    margin: 0;
	    padding: 0;
	}

	.form-pendaftaran {
	    margin-bottom: 15px;
	}

	#mobile-menu{
		display: flex!important;
	}

	div#mobile-menu {
	    position: fixed;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    background-color: #fff;
	    height: 50px;
	    flex-flow: row nowrap;
	    justify-content: space-around;
	    align-items: center;
	    font-size: 18pt;
	    box-shadow: 0px 0px 15px #4509095e;
	    color: #2e52a6;
	}

	div#mobile-menu div {
	    flex-grow: 1;
	    height: inherit;
	    text-align: center;
	    line-height: 50px;
	    cursor: pointer;
	}

	div#mobile-menu-container {
	    display: block!important;
	    position: fixed;
	    right: -300px;
	    top: 0;
	    bottom: 50px;
	    width: 300px;
	    background-color: #fbfbfb;
	    transition: 0.2s ease-in;
	    overflow: auto;
	    padding: 15px;
		padding-left: 5;
		z-index: 100;
	}

	div#mobile-menu-container ul {margin: 0;list-style: none;padding-left: 10px;}

	div#mobile-menu-container ul li a {
	    padding: 7px 0px;
	    color: #000;
	    display: block;
	    font-size: 12pt;
	}

	.v-category ul.article {
	    list-style: none;
	    margin: 0;
	    padding: 0;
	}

	.v-category ul.article li a {
	    display: flex;
	    flex-flow: column nowrap;
	    color: #000;
	    margin-bottom: 15px;
	    border-bottom: 1px solid #ccc;
	}

	.v-category ul figure {
	    width: 100%;
	    height: 200px;
	    overflow: hidden;
	    display: flex;
	    flex-flow: row nowrap;
	    align-items: center;
	    justify-content: center;
	    background-color: #000;
	}

	.v-category ul figure img {
	    max-width: 100%;
	    max-height: 100%;
	}

	.v-category .article title {}

	.v-category ul.article .title {
	    background-color: #fff;
	    color: #000;
	    font-size: 12pt;
	    padding: 0;
	    margin-top: 15px;
	    margin-bottom: 5px;
	    margin-left: 0;
	    margin-right: 0;
	}

	.v-category ul.article .title h1 {
	    color: inherit;
	    font-size: inherit;
	    margin-bottom: 0;
	}

	.v-category ul.article .detail ul {
	    display: flex;
	    flex-flow: row wrap;
	    justify-content: space-between;
	    margin-top: 5px;
	    font-size: 8pt;
	}

	.page-pagination {
	    text-align: center;
	}

	.v-category ul.article li a:hover {
	    text-decoration: none;
	}

	.detail-info {
	    font-size: 12pt;
	    margin-bottom: 15px;
	    display: flex;
	    flex-flow: column nowrap;
	}

	span.detail-label {
	    font-weight: bold;
	}

	.detail-info embed {
	    background-color: #ccc;
	    width: 100%;
	}

	.info-pejabat {
	    height: 200px;
	    margin-top: 15px;
	    padding: 15px;
	    background-color: #000;
	    width: 100%;
	}

	.pejabat-container {
	    overflow: hidden;
	}

	.pejabat-slider {
	    display: flex;
	    flex-flow: row nowrap;
	    width: 100%;
	    height: 100%;
	}

	.pejabat-container {
	    width: 100%;
	    height: 100%;
	    overflow: auto;
	}

	.pejabat-slider {}

	.item-pejabat {
	    position: relative;
	    width: 150px;
	    height: 100%;
	    flex-shrink: 0;
	    margin: 0 7px;
	    padding: 5px;
	    background-color: #fff;
	    border-radius: 7px;
	    border-bottom-left-radius: 0px;
	    box-shadow: 0px 0px 3px #4a3131;
	}

	.item-pejabat .img {
	    width: 100%;
	    height: 100%;
	    background-position: top center;
	    background-repeat: no-repeat;
	    background-size: cover;
	    border-radius: 5px;
	    border-bottom-left-radius: 0px;
	}

	.item-pejabat .keterangan {
	    position: absolute;
	    left: 5px;
	    right: 5px;
	    bottom: 5px;
	    padding: 3px;
	    color: #fff;
	    background-color: rgba(0, 0, 0, 0.84);
	    font-size: 8pt;
	}

	.v-dosen .form-group {
   	 	margin: 0px;
	    margin-bottom: 15px;
	}

	.v-dosen .form-horizontal label.control-label.class.col-sm-2 {
	    padding: 5px 0;
	}

	a.dosen-a {
	    display: flex;
	    flex-flow: column nowrap;
	    color: #000;
	    text-decoration: none;
	    margin-bottom: 15px;
	    box-shadow: 0px 0px 3px #717076;
	    border-radius: 5px;
	}

	.gelar {
	    padding: 5px 15px;
	    background-color: #428bca;
	    color: #fff;
	    border-top-left-radius: 5px;
	    border-top-right-radius: 5px;
	}

	.dosen-a figure {
	    display: flex;
	    flex-flow: row nowrap;
	    align-items: center;
	    justify-content: center;
	    background-color: #504747;
	    width: 100%;
	    height: 250px;
	    overflow: hidden;
	}

	img.dosen-img {
	    height: 250px;
	}

	.info-dosen {
	    background-color: whitesmoke;
	    padding: 5px 15px;
	    border-bottom-left-radius: 5px;
	    border-bottom-right-radius: 5px;
	}

	.info-dosen p {
	    padding: 5px 0px;
	    margin: 0px;
	    display: flex;
	    flex-flow: row nowrap;
	}

	.info-dosen span.atribut {
	    width: 80px;
	    flex-shrink: 0;
	}

	.info-dosen span.nilai {
	    margin-left: 5px;
	    font-weight: bold;
	}

	.v-page .content img {max-width: 100%!important;height: auto!important;}

	.caption * {
	    margin: 0px!important;
	    font-size: 10pt!important;
	    font-weight: normal!important;
	}
}

@keyframes down-menu{
	from{				
		transform: scaley(.5);
		opacity: 0;
	}
	to{		
		transform: scaley(1);
		opacity: 1;
	}
}