html
{
	margin: 0;
	padding: 0;
	font-size: 1rem;
}

body
{
	overflow-x: hidden;
	font-family: 'Roboto-Light';
}

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

noscript .fa-grin-beam-sweat
{
	font-size: 20rem;
	margin-bottom: 20px;
	color: rgba(0, 0, 0, .3);
}

noscript p
{
	font-size: 20px;
}

#loading
{
	position: fixed;
	z-index: 2000;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	margin: 0;
	padding: 0;
	opacity: 1;
}

#loading img
{
	position: fixed;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

header
{
	background-image: url('stars.jpg');
	height: 100vh;
	background-size: cover;
	background-position: center;
}

header .navbar
{
	text-transform: uppercase;
	background-color: transparent !important;
	font-family: 'Roboto-Bold';
	padding-top: 20px;
}

header .navbar-brand
{
	font-family: 'Norwester';
	letter-spacing: 2px;
	font-size: 33px;
	margin-left: 20px;
	text-transform: uppercase;
	padding: 0 10px;
	/* border: 3px solid white !important; Add border class with navbar-brand */
}

header .navbar li
{
	margin-right: 1rem;
	letter-spacing: 1px;
}

header h2
{
	position: absolute;
	font-family: 'Roboto-Bold';
	color: white;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 4em;
}

#navbar-menu .nav-link::after
{
	content: '';
	display: block;
	width: 0;
	height: 2px;
	background: #ffffff;
	transition: width .3s;
}

#navbar-menu .nav-link:hover::after
{
	width: 100%;
	transition: width .3s;
}
article .div-section
{
	margin-top: 50px;
	margin-bottom: 70px;
}

article .div-title
{
	margin-bottom: 70px;
}

article .bg-title
{
	font-family: 'Roboto-Bold';
	text-transform: uppercase;
	color: #ffc107 !important;
	opacity: 0.5;
	font-size: 3em;
}

article .sub-title
{
	font-family: 'Roboto-Bold';
	text-transform: uppercase;
	margin-top: -17px;
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1000 !important;
}

article #about .img-thumbnail
{
	border: none;
	height: 400px;
	width: 400px;
	padding: 0;
}

article .intro-text
{
	font-size: 1.3em;
	text-align: justify;
}

article .btn-download-cv
{
	margin-top: 60px;
	border: 1px solid #000000;
	font-family: 'Roboto-Regular';
}

article .btn-download-cv:hover
{
	margin-top: 60px;
	border: 1px solid #000000;
}

article #about-2
{
	background-color: #0d0d0d;
	background: linear-gradient(
		rgba(0, 0, 0, 0.7),
		rgba(0, 0, 0, 0.7)
		),
		url('architecture-business-clean.jpg');
	background-size: cover;
	background-attachment: fixed;
}


/* PROGRES BAR */
article .progress-bar
{
	transition-duration: 3s !important;
}

.progress-bar
{
	width: 0;
	animation: progress 2.5s ease-in-out forwards;
}

.title-bar
{
	opacity: 0;
	animation: show 1.35s forwards ease-in-out 1.5s;
	font-family: 'Roboto-Regular';
}

@keyframes progress
{
	from
	{
		width: 0;
	}

	to
	{
		width: 100%;
	}
}

@keyframes show
{
	from
	{
		opacity: 0;
	}

	to
	{
		opacity: 1;
	}
}
/* END PROGRES BAR */

article #about-2 .title-about-2
{
	padding: 50px 0;
}

article .sub-title-white
{
	font-family: 'Roboto-Bold';
	text-transform: uppercase;
	margin-top: -17px;
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1000 !important;
	color: #ffffff;
}

article #about-2 h4
{
	font-family: 'Roboto-Regular';
	color: #ffffff;
}

#portofolio .swiper-wrapper
{
	height: 0% !important;
}

#portofolio .nav-pills .nav-link
{
	border-radius: 0;
}

#portofolio .nav-pills .nav-link.active, .nav-pills .show > .nav-link
{
	font-family: 'Roboto-Regular';
	color: #ffffff;
	background-color: #e6ac00;
}

#portofolio a
{
	font-family: 'Roboto-Regular';
	color: white;
	text-decoration: none;
	background-color: rgba(0, 0, 0, 0.7);
}

.carousel-caption h2
{
	font-size: 400%;
	font-weight: 500;
	text-shadow: 1px 1px 10px #000;
}

.carousel-caption p
{
	font-size: 20px;
}

#first-project, #second-project
{
	filter: brightness(50%);
}

#interests
{
	background-color: #0d0d0d;
	height: auto;
}

#interests .interests-title
{
	font-family: 'Roboto-Bold';
	text-transform: uppercase;
	color: #ffc107 !important;
	font-size: 3em;
}

#interests .fas
{
	color: white;
	font-size: 100px;
}

#interests .text-content-interest
{
	font-family: 'Roboto-Regular';
	color: #ffffff;
	margin-top: 20px;
	margin-bottom: 40px;
}

#interests .fa-code:hover, .fa-paint-roller:hover, .fa-chart-line:hover, .fa-database:hover,
.fa-shield-alt:hover, .fa-chalkboard-teacher:hover, .fa-user-tie:hover, .fa-headset:hover
{
	color: #ffc107 !important;
	transition: .5s;
	cursor: pointer;
}

#contact
{
	/*
	background-color: #0d0d0d;
	background: linear-gradient(
		rgba(255, 255, 255, 0.9),
		rgba(255, 255, 255, 0.9)
		),
		url('rawpixel.jpg');
	background-size: cover;
	background-attachment: fixed;
	*/
}

#contact .contact-title
{
	font-family: 'Roboto-Bold';
	text-transform: uppercase;
	color: #000000 !important;
	font-size: 3em;
}

#contact .form-control
{
	border-right: 0;
	border-left: 0;
	border-top: 0;
	border-radius: 0;
}

#contact .form-control:focus
{
	box-shadow: none !important;
}

#contact .border
{
	/* opacity: .8; */
}

#contact input.error
{
	border-color: red;
	border-style: solid;
	border-width: 1px;
	border-right: 0;
	border-left: 0;
	border-top: 0;
	border-radius: 0;
}

#contact input.valid
{
	border-color: green;
	border-style: solid;
	border-width: 1px;
	border-right: 0;
	border-left: 0;
	border-top: 0;
	border-radius: 0;
}

footer
{
	color: #ffffff;
	background-color: #000000;
	font-family: 'Roboto-Regular';
}

footer .fab
{
	text-decoration: none;
	font-size: 20px;
	color: #ffffff;
}

footer .fa-instagram:hover, .fa-facebook-square:hover, .fa-telegram-plane:hover,
.fa-line:hover, .fa-youtube:hover, .fa-twitter:hover
{
	color: #ffc107;
}

footer p
{
	margin-bottom: 0 !important;
	padding-bottom: 20px;
	font-family: 'Roboto-Light';
}

footer p a
{
	color: #ffc107;
}

footer p a:hover
{
	text-decoration: none;
	color: #ffc107;
}

.link-active
{
	color: blue !important;
	background-color: transparent !important;
}

/* Extra small devices (portrait phones (XS), less than 576px) */
@media (max-width: 575.98px)
{
	noscript .fa-grin-beam-sweat
	{
		font-size: 15rem;
		margin-bottom: 20px;
		color: rgba(0, 0, 0, .3);
	}

	noscript p
	{
		font-size: 20px;
	}

	header .navbar
	{
		font-family: 'Roboto-Regular';
		text-transform: capitalize;
	}

	header .navbar-brand
	{
		font-size: 25px;
		margin-left: 10px;
	}

	header h2
	{
		font-size: 2.5em;
	}

	.particles-js-canvas-el
	{
		display: none;
	}

	#navbar-menu .nav-link
	{
		text-align: center !important;
	}

	#navbar-menu .nav-link::after
	{
		height: 0;
	}

	article .bg-title
	{
		font-size: 2.5em;
	}

	article .sub-title
	{
		font-size: 2em;
	}

	article .sub-title-white
	{
		font-size: 2em;
	}

	#interests .interests-title
	{
		font-size: 2.5em;
	}

	#interests .fas
	{
		font-size: 70px;
	}

	article #about .img-thumbnail
	{
		height: 350px;
		width: 350px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20px;
	}

	article .intro-text
	{
		font-size: 1.2rem;
	}

	article .btn-download-cv
	{
		margin-top: 10px;
		font-size: 1rem;
	}

	article .btn-download-cv:hover
	{
		margin-top: 10px;
	}

	#form-contact .btn-submit
	{
		margin-top: 20px;
		width: 100%;
	}

	#form-contact .btn-position-left
	{
		text-align: left !important;
	}
}

/* Small devices (landscape phones (SM), 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px)
{
	#interests .fas
	{
		font-size: 70px;
	}

	header .navbar
	{
		font-family: 'Roboto-Regular';
		text-transform: capitalize;
	}

	header h2
	{
		font-size: 2.5em;
	}

	#navbar-menu .nav-link
	{
		text-align: center !important;
	}

	#navbar-menu .nav-link::after
	{
		height: 0;
	}

	article #about .img-thumbnail
	{
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20px;
	}

	article .intro-text
	{
		font-size: 1.2rem;
	}

	article .btn-download-cv
	{
		margin-top: 10px;
		font-size: 1rem;
	}

	article .btn-download-cv:hover
	{
		margin-top: 10px;
	}

	#contact .container
	{
		max-width: 100%;
	}

	#form-contact .btn-submit
	{
		margin-top: 20px;
		width: 100%;
	}
}

/* Medium devices (tablets (MD), 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px)
{
	header .navbar li
	{
		margin-right: auto;
		letter-spacing: 1px;
	}

	article #about .img-thumbnail
	{
		width: 350px;
		height: 350px;
	}

	article .intro-text
	{
		font-size: 1rem;
	}

	article .btn-download-cv
	{
		margin-top: auto;
		font-size: .8rem;
	}

	article .btn-download-cv:hover
	{
		margin-top: auto;
	}
}

/* Large devices (desktops (LG), 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px)
{
	article .intro-text
	{
		font-size: 1.2rem;
	}

	article .btn-download-cv
	{
		margin-top: 20px;
		font-size: 1rem;
	}

	article .btn-download-cv:hover
	{
		margin-top: 20px;
	}
}

/* Extra large devices (large desktops (XL), 1200px and up) */
@media (min-width: 1200px)
{
}