@charset "utf-8";
html {
  	overflow: auto !important;
}
body {
	font-family: 'Lato', sans-serif;
	background-image: url('../img/bg.png');
	background-position: top center;
	background-size: 2722px 1080px;
	background-attachment: fixed;
	background-repeat: no-repeat;
	overflow-y: scroll;
}
::selection {
	background-color: #059caf;
	color: white;
}
::-webkit-scrollbar {
 width: 12px;
}

::-webkit-scrollbar-track {
 background-color: #000000;
}

::-webkit-scrollbar-thumb {
 background-color: #FFF;
}

::-webkit-scrollbar-thumb:hover {
 background-color: #555555;
}
* {
	scrollbar-width: thin;
	scrollbar-color: #000000 #f5f5f5;
}
*::-webkit-scrollbar {
 width: 12px;
}
*::-webkit-scrollbar-track {
 background-color: #000000;
}
*::-webkit-scrollbar-thumb {
 background-color: #FFF;
}
*::-webkit-scrollbar-thumb:hover {
 background-color: #555555;
}
*::-moz-scrollbar {
 width: 12px;
}
*::-moz-scrollbar-track {
 background-color: #000000;
}
*::-moz-scrollbar-thumb {
 background-color: #FFF;
}
 *::-moz-scrollbar-thumb:hover {
 background-color: #555555;
}
#main-border {
	border: 2px solid #0b2332;
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
}
nav {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}
.navbar .navbar-toggler .icon-bar {
	color: #fff !important;
}
.hero-banner {
	background-image: url('../img/workdesk.png');
	background-size: 1435px 820px;
	background-position: top;
	color: #fff;
	min-height: 750px;
	background-repeat: no-repeat;
}
#content-hero-banner {
	bottom: 0px;
	background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}
#content-hero-banner img {
	border: 7px solid #000000;
}
h1 {
	font-size: 60px;
}
h1, h2, h3 {
	font-family: 'Lato', sans-serif;
}
a.color-blue:hover {
	color: #0c9db0;
}
.color-blue {
	color: #0c9db0;
}
.anim-avatar {
	width: 200px;
	height: 200px;
	left: calc(50% - 100px);
	background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
	background-size: 1000%;
	filter: blur(5px);
	animation: glowing 40s linear infinite;
	transition: opacity .3s ease-in-out;
}
@keyframes glowing {
 0% {
background-position: 0 0;
}
 50% {
background-position: 400% 0;
}
 100% {
background-position: 0 0;
}
}
.timeline {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
}
.timeline::after {
	content: '';
	position: absolute;
	width: 6px;
	background-color: white;
	top: 0;
	bottom: 0;
	right: 5%;
	margin-left: -3px;
}
.timeline .container-timeline {
	padding: 0px 70px 0px 10px;
	position: relative;
	background-color: inherit;
	width: 100%;
}
.timeline .container-timeline::after {
	content: '';
	position: absolute;
	width: 25px;
	height: 25px;
	right: 21px;
	background-color: #111111;
	border: 3px solid #0c9db0;
	top: 20px;
	border-radius: 50%;
	z-index: 1;
}
.timeline .left {
	left: 0;
}
.timeline .left::before {
	content: " ";
	height: 0;
	position: absolute;
	top: 22px;
	width: 0;
	z-index: 1;
	right: 60px;
	border: medium solid #212529;
	border-width: 10px 0 10px 10px;
	border-color: transparent transparent transparent #212529;
}
.timeline .content {
	padding: 20px 30px;
	background-color: white;
	position: relative;
}
#thumbnails img:hover {
	opacity: 0.5;
	transition-duration: 0.4s;
	transition-timing-function: ease;
}

@media screen and (max-width: 1400px) {
.timeline .container-timeline::after {
	right: 18px;
}
}

@media screen and (max-width: 1200px) {
.hero-banner {
	background-image: url('../img/workdesk.png');
	background-size: 950px auto;
	background-position: bottom;
	color: #fff;
	min-height: 540px;
	background-repeat: no-repeat;
}
.timeline::after {
	width: 0;
}
.timeline .container-timeline {
	padding: 0;
}
.timeline .left::after, .timeline .left::before {
	content: none;
}
.timeline .container-timeline::before {
	left: 60px;
	border: medium solid #212529;
	border-width: 10px 10px 10px 0;
	border-color: transparent #212529 transparent transparent;
}
}