@font-face {
    font-family: "Roboto-Light";
    src: url(../fonts/Roboto-Light_0.ttf);
}
@font-face {
    font-family: "Roboto-Medium";
    src: url(../fonts/Roboto-Medium_1.ttf);
}
@font-face {
    font-family: "Roboto-Regular";
    src: url(../fonts/Roboto-Regular_1.ttf);
}
@font-face {
    font-family: "Roboto-Black";
    src: url(../fonts/Roboto-Black_0.ttf);
}
@font-face {
    font-family: "Roboto-Bold";
    src: url(../fonts/Roboto-Bold_1.ttf);
}

html, body{
	height: 100%;
}

*{
	margin: 0; 
	padding: 0;
}

/* COVER SECTION */
#cover{
	width: 100%;
	position: relative;
	/*margin-top: 100px;*/
}
#cover .cover-wrap{
	position: relative;
	max-height: 715px;
}
#cover .fill-background{
	background: url(../img-baru/background.jpg);
	background-repeat: no-repeat;
  	background-size: 100% 100%;	
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
#cover .content{
	padding-top: 80px;
	text-align: center;
	position: relative;
	width: 100%;
	height: 260px;
}
#cover .text-cover{
    width: 340px;
    position: absolute;
    right: 50px;
    top: 15%;
    text-align: center;
}
#cover .text-cover .title{
	font-size: 30px;
	display: block;
	font-family: "Roboto-Bold";
	color: #006E89;
	text-align: center;
	margin-bottom: 15px;
}
#cover .text-cover .desc{
	color: #3F3F3F;
	font-family: "Roboto-Light";
	font-size: 16px;
	line-height: 24px;
}

#cover .event{
	width: 100%;
	position: absolute;
	bottom: 0;
	text-align: center;
}
#cover .event .event-title{
	position: absolute;
	left: 0;
	height: 100%;
	width: 22px;
	background: #F16136;
}
#cover .event .title{
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
	color: #fff;
	text-align: center;
	position: absolute;
	left: -16px;
	top: 50%;
	margin-top: -10px;
	font-family: "Roboto-Medium";
	font-size: 18px;
}
#cover .event .event-container{
	background: #fff;
}
#cover .event .event-container{
	height: 100%;
	float: left;
	width: 70%;
	padding: 10px;
	min-height: 225px;
}
#cover .event .event-container .title-corporate{
	font-size: 23px;
	font-family: "Roboto-Bold";
	color: #006E89;
	text-align: left;
	margin-bottom: 15px;
	margin-top: 10px;
}
#cover .event .event-container .desc-corporate{
    font-size: 16px;
    text-align: left;
    line-height: 26px;
    font-family: "Roboto-Light";
}
#cover .event iframe{
	float: left;
	height: 225px;
	width: 15%;
	margin: 0;
	padding: 0;
	border: none;
	box-shadow: none;
	min-width: 320px;
	background: #fff;
}
#cover .event .event-container .box-event{
	padding: 15px 5px;
	float: left;
}
#cover .event .event-container .box-event .datetime{
	display: inline-block;
	vertical-align: top;
	margin: 0 5px;
}
#cover .event .event-container .box-event .datetime .day{
	font-family: "Roboto-Regular";
	color: #006E89;
	font-size: 20px;
	display: block;
}
#cover .event .event-container .box-event .datetime .date{
	font-family: "Roboto-Light";
	color: #006E89;
	display: block;
	font-size: 12px;
}
#cover .event .event-container .box-event .event-description{
	display: inline-block;
	vertical-align: top;
	max-width: 300px;
	text-align: left;
}
#cover .event .event-container .box-event .event-description .title-event{
	color: #006E89;
	font-family: "Roboto-Medium";
	font-size: 15px;
}
#cover .event .event-container .box-event .event-description .desc-event{
	color: #3F3F3F;
	font-size: 13px;
}

/* PROGRAM SECTION */
#program{
	background: #006E89;
	text-align: center;
	padding-bottom: 70px;
	color: #fff;
}
#penjelasan-framework{
	font-family: "Roboto-Light";
	font-size: 18px;
	margin-top: 20px;
}
#program a{
	text-decoration: none;
	color: #fff;
	font-size: 19px;
	font-family: "Roboto-Regular";
}
#program .section-title{
	color: #FFFFFF;
	font-family: "Roboto-Bold";
	text-align: center;
	margin-top: 80px;
	margin-bottom: 35px;
	font-size: 32px;
}

#program  .box-program{
	margin-top: 25px;
	margin-bottom: 20px;
	cursor: pointer;
}
#program .box-program .img-program{
	height: 100px;
	display: block;
}
#program .box-program .img-program img{
	margin: 0 auto;
	max-width: 100px;
	max-height: 100px;
}
#program .box-program .title{
	color: #fff;
	display: block;
	padding: 10px 0;
	max-width: 190px;
	margin: 0 auto;
	font-size: 19px;
	font-family: "Roboto-Light";
}
#program .box-program .icon{
	color: #fff;
	display: none;
}
#program .program-description{
	font-family: "Roboto-Light";
	color: #fff;
	padding-top: 25px;
	padding-bottom: 65px;
	font-size: 16px;
	display: none;
	line-height: 30px;
	text-align: left;
}

/* VISI MISI SECTION */
#visi-misi{
	margin: 95px 0;
}
#visi-misi ol,
#visi-misi p{
	color: #232323;
	font-family: "Roboto-Light";
	max-width: 320px;
	margin-left: 20px;
	margin-top: 75px;
}
#visi-misi p{
    font-size: 16px;
    line-height: 25px;
}
#visi-misi li{
	margin-bottom: 20px;
	padding-left: 10px;
	font-size: 14px;
}
#visi-misi .nav-visi-misi{
	position: absolute;
	right: 0;
	top: 50%;
	border: none;
	margin-right: 15px;
	margin-top: -160px;
}
#visi-misi .nav-visi-misi li{
	float: none;
	margin: 0;
	padding: 0;
}
#visi-misi .nav-visi-misi li.active a{
	background: #F16136;
}

#visi-misi .nav-visi-misi li.active a::after{
	content: ' ';
	position: absolute;
	top: 0;
	right: -15px;
	height: 100%;
	border-top: 41.5px solid transparent;
	border-bottom: 41.5px solid transparent;
	border-left: 15px solid #F16136;
}
#visi-misi .nav-visi-misi li a{
	border: none;
	margin: 0;
	font-family: "Roboto-Medium";
	width: 118px;
	height: 83px;
	background: #006E89;
	border-radius: 0;
	color: #fff;
	position: relative;
	display: block;
	vertical-align: middle;
	padding-top: 20px;
	font-size: 15px;
}

#tentang-logo{
	background: #ececec;
	padding: 40px 0;
	text-align: center;
}
#tentang-logo img{
	width: 100%;
	max-width: 291px;
}
#tentang-logo .tentang-logo-title{
	color: #006E89;
	font-family: "Roboto-Bold";
	font-size: 32px;
	margin: 15px 0;
	text-align: left;
}
#tentang-logo .tentang-logo-desc{
	color: #232323;
	font-family: "Roboto-Light";
	font-size: 16px;
	line-height: 25px;
	text-align: left;
}
#tentang-logo .tentang-logo-desc p{
	margin-bottom: 20px;
}

/* GALERI SECTION */
.bx-wrapper{
	margin: 0;
}
.bx-viewport{
	max-height: 400px;
}
#galeri{
	padding-top: 30px;
}
#galeri .galeri-logo-title{
	color: #006E89;
	font-family: "Roboto-Bold";
	font-size: 32px;
	margin: 30px 0;
	text-align: center;
}
.bx-wrapper{
	background: none;
	border: none;
	box-shadow: none;
}
#galeri .show-box{

max-width: 584px;
}
#galeri .show-box img{
	width: 100%;
}
#galeri .list-galeri{
	
}
#galeri .box-galeri{
	float: left;
	width: 50%;
	cursor: pointer;
	position: relative;
	max-width: 292px;
}
#galeri .box-galeri.active .desc-galeri,
#galeri .box-galeri:hover .desc-galeri{
	display: block;
}
#galeri .box-galeri .desc-galeri{
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #006E89;
	color: #fff;
	padding: 20px;
}
#galeri .box-galeri .desc-galeri .title-galeri{
	font-family: "Roboto-Medium";
	font-size: 18px;
	margin-bottom: 10px;
}
#galeri .box-galeri .desc-galeri .description{
	font-family: "Roboto-Light";
	font-size: 13px;
	text-align: justify;
	display: table;
	width: 100%;
	height: 100%;
}
#galeri .box-galeri .desc-galeri .description>div{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
#galeri .box-galeri img{
	
}
#slider-prev a,
#slider-next a{
	display: block;
	width: 23px;
	position: absolute;
	top: 40%;
	height: 33px;
	background: url(../img-baru/control.png);
	background-repeat: no-repeat;
	/* display: none; */
}
#slider-prev a{left: -35px;background-position: top left;}
#slider-next a{right: -35px;background-position: -25px 0;}

/* FOOTER SECTION */
#footer{
	text-align: center;
	bottom: 0;
	width: 100%;
	padding: 15px 0;
}
#footer .social-media{
	margin-top: 5px;
	font-size: 18px;
}
#footer .social-media .title{
	color: #006e89;
	max-width: 300px;
	font-family: "Roboto-Bold";
	margin: 0 auto;
	width: 100%;
	text-align: center;
}
#footer .social-media .social-media-button{	
	margin-left: 15px;
}
#footer .social-media .social-media-button .fa{
	margin-left: 2px;
}
#footer .social-media a{
	text-decoration: none;
	color: #006e89;
	margin: 10px 5px;
	font-family: "Roboto-Regular";
}

#footer .social-media a:hover,
#footer .social-media a.active{
	color: #F16136;
	font-family: "Roboto-Black";
}
#footer a{
	text-decoration: none;
	color: #232323;
	display: inline-block;
	width: 35px;
	text-align: center;
	font-size: 23px;
	line-height: 30px;
}

#footer .copyright{
	font-family: "Roboto-Light";
	font-size: 12px;
	margin-bottom: 20px;
	color: #006e89;
	line-height: 30px;
	margin: 0;
	text-align: center;
}
#footer .copyright span{
	font-family: "Roboto-Medium";
}


.back-to-top{
	text-align: center;
	margin: 30px 0;
	font-family: "Roboto-Bold";
	font-size: 13px;
	margin-bottom: 0px;
}
.back-to-top span{
	display: block;
	margin: 5px 0;
}
.back-to-top a{
	text-decoration: none;
	color: #006E89;
	font-size: 14px;
}
.back-to-top a:hover{
	color: #F16136;
	font-family: "Roboto-Bold";
}
.back-to-top .icon{
	font-size: 25px;
}



@media (max-width: 768px) {
	.logo-wrapper{
		margin-top: 0px;
	}
	.logo-bni{
		max-width: 70px;
		margin-right: 15px;
	}
	.logo-universitas{
		max-width: 40px;
	}
	#cover{
		margin-top: 61px;
	}
	#navbar li a:last-child{
		height: 35px;
	}
	#cover .event{
		position: relative;
		margin-bottom: 20px;
	}
	#cover .text-cover .title{
		font-size: 26px;
	}
	#cover .text-cover .desc{
		font-size: 14px;
	}
	#cover .event iframe{
		width: 100%;
		min-width: inherit;
	}
	#cover .event .event-container{
		width: 100%;
	}
	#cover .text-cover{
		width: 100%;
		height: 100%;
		position: relative;
		top: 0;
		left: 0;
		margin: 30px 0;
		padding: 0 15px;
	}
	#cover .event .event-container .desc-corporate{
		font-size: 14px;
	}
	#program .section-title{
		margin-top: 20px;
		margin-bottom: 10px;
	}
	#visi-misi ol,
	#visi-misi p{
		margin-top: 20px;
	}
	#visi-misi{
		margin: 40px 0;
	}
	#visi-misi .tab-content{
		margin-top: 10px;
	}
	#visi-misi .nav-visi-misi{
		top: 0;
		margin-top: 0;
	}
	#visi-misi .nav-visi-misi li a{
		height: 60px;
		padding-top: 10px;
	}
	#visi-misi .nav-visi-misi li.active a::after{
	    border-top: 30px solid transparent;
	    border-bottom: 30px solid transparent;
	    border-left: 10px solid #F16136;
	    right: -10px;
	}
	#footer .copyright{
		text-align: center;
		line-height: 20px;
	}
	#footer img{
		margin-bottom: 15px;
	}
	#footer{
		position: relative;
	}
	#footer .image{
		text-align: center;
	}
	.back-to-top{
		margin-bottom: 30px;
	}
	.modal-header-success {
		color:#fff;
		padding:9px 15px;
		border-bottom:1px solid #eee;
		background-color: #006e89;
		-webkit-border-top-left-radius: 5px;
		-webkit-border-top-right-radius: 5px;
		-moz-border-radius-topleft: 5px;
		-moz-border-radius-topright: 5px;
		 border-top-left-radius: 5px;
		 border-top-right-radius: 5px;
	}
}