body
{
	position: relative;
    color: #444649;

    --white-color: #f8f9fa;
    --blue-color: #08f;
    --black-color: #444649;
}

.navbar {
	border-bottom: 7px solid var(--blue-color);
}

.navbar-brand
{
    margin: 0;
    text-transform: uppercase;
}

.nav-item
{
	transition: all 0.3s ease;
	border: 1px solid rgba(255,255,255,0.0);
}

.nav-item:hover
{
	border-left: 1px solid #d9dadb;
	border-right: 1px solid #d9dadb;
}

#intro.section
{
    position: relative;
    z-index: -2;

    background: url('../img/bg/bg-intro.jpg') no-repeat top center/cover;
}

p
{
	font-size: 1.3rem;
}

time
{
	font-size: 1.1rem;
}

img.portrait
{
	z-index: 1;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	border: 7px solid var(--blue-color);
	margin: 10px;
	transform: all 0.3 ease;
}

.full-height
{
    height: 100vh;
}

.overlay
{
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-color: rgba(0,0,0,.4);
}

.anchor::before
{
	display: block;
	content: " ";
	padding-top: 72px;
	margin-top: -72px;
	visibility: hidden;
}

#intro .container
{
    width: 100%;
}

#intro.section .container
{
    position: relative;
    top: 50%;

    margin: auto;

    -webkit-transform: translateY(-50%);

            -moz-transform: translateY(-50%);

              -o-transform: translateY(-50%);

         transform: translateY(-50%);
    text-align: center;
}

#intro h1,
#intro h2
{
    text-transform: uppercase;
    color: var(--white-color);
}

.animation-element.slide-right
{
	opacity:0;
	-webkit-transition: all 0.5s 0.2s ease;
	-moz-transition: all 0.5s 0.2s ease;
	-o-transition: all 0.5s 0.2s ease;
	transition: all 0.5s 0.2s ease;
	-webkit-transform: translateX(-200px);
	-moz-transform: translateX(-200px);
	-o-transform: translateX(-200px);
	transform: translateX(-200px);
}

.animation-element.slide-right.in-view
{
	opacity:1;
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-o-transform: translateX(0);
	transform: translateX(0);
}

.animation-element.slide-left
{
	opacity:0;
	-webkit-transition: all 0.5s 0.2s ease;
	-moz-transition: all 0.5s 0.2s ease;
	-o-transition: all 0.5s 0.2s ease;
	transition: all 0.5s 0.2s ease;
	-webkit-transform: translateX(200px);
	-moz-transform: translateX(200px);
	-o-transform: translateX(200px);
	transform: translateX(200px);
}

.animation-element.slide-left.in-view
{
	opacity:1;
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-o-transform: translateX(0);
	transform: translateX(0);
}

.animation-element.slide-up
{
	opacity:0;
	-webkit-transition: all 0.5s 0.2s ease;
	-moz-transition: all 0.5s 0.2s ease;
	-o-transition: all 0.5s 0.2s ease;
	transition: all 0.5s 0.2s ease;
	-webkit-transform: translateY(50px);
	-moz-transform: translateY(50px);
	-o-transform: translateY(50px);
	transform: translateY(50px);
}

.animation-element.slide-up.in-view
{
	opacity:1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}

.grow 
{
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-backface-visibility: hidden;
	-ms-transform: translateZ(0);
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	transition:all 0.3s ease-in-out;
}

.grow:hover
{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.grow-fast 
{
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-backface-visibility: hidden;
	-ms-transform: translateZ(0);
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	transition:all 0.1s ease-in-out;
}

.grow-fast:hover
{
	
    -webkit-transform: scale(1.048);
    -moz-transform: scale(1.048);
    -ms-transform: scale(1.048);
    -o-transform: scale(1.048);
    transform: scale(1.048);
}

.typewriter>h1{
	margin: auto;
	width: 6.5em;
	opacity: 0;
	overflow: hidden; /* Ensures the content is not revealed until the animation */
	border-right: 5px solid var(--blue-color); /* The typwriter cursor */
	white-space: nowrap; /* Keeps the content on a single line */
	-webkit-animation: typing 1.5s steps(20, end);
	-moz-animation: typing 1.5s steps(20, end);
	-o-animation: typing 1.5s steps(20, end);
	animation: typing 1.5s steps(20, end);
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
	-o-animation-delay: 0.5s;
	animation-delay: 0.5s;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.typewriter>h2 {
	margin: auto;
	width: 20em;
	opacity: 0;
	overflow: hidden; /* Ensures the content is not revealed until the animation */
	border-right: 5px solid var(--blue-color); /* The typwriter cursor */
	white-space: nowrap; /* Keeps the content on a single line */
	-webkit-animation: typing-delay 3s steps(40, end);
	-moz-animation: typing-delay 3s steps(40, end);
	-o-animation: typing-delay 3s steps(40, end);
	animation: typing-delay 3s steps(40, end);
	-webkit-animation-delay: 2.0s;
	-moz-animation-delay: 2.0s;
	-o-animation-delay: 2.0s;
	animation-delay: 2.0s;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

/* The typing effect */
@-webkit-keyframes typing {
  0% {
    width: 0;
  }
  1% {
  	opacity: 1;
  }
  99.9% {
    border-right: .15em solid var(--blue-color);
  }
  100% {
  	opacity: 1;
    border: none;
  }
}
@-moz-keyframes typing {
  0% {
    width: 0;
  }
  1% {
  	opacity: 1;
  }
  99.9% {
    border-right: .15em solid var(--blue-color);
  }
  100% {
  	opacity: 1;
    border: none;
  }
}
@-o-keyframes typing {
  0% {
    width: 0;
  }
  1% {
  	opacity: 1;
  }
  99.9% {
    border-right: .15em solid var(--blue-color);
  }
  100% {
  	opacity: 1;
    border: none;
  }
}
@keyframes typing {
  0% {
    width: 0;
  }
  1% {
  	opacity: 1;
  }
  99.9% {
    border-right: .15em solid var(--blue-color);
  }
  100% {
  	opacity: 1;
    border: none;
  }
}

@-webkit-keyframes typing-delay {
  0% {
    width: 0;
  }
  1% {
  	opacity: 1;
  }
  99.9% {
    border-right: .15em solid var(--blue-color);
  }
  100% {
  	opacity: 1;
    border: none;
  }
}
@-moz-keyframes typing-delay {
  0% {
    width: 0;
  }
  1% {
  	opacity: 1;
  }
  99.9% {
    border-right: .15em solid var(--blue-color);
  }
  100% {
  	opacity: 1;
    border: none;
  }
}
@-o-keyframes typing-delay {
  0% {
    width: 0;
  }
  1% {
  	opacity: 1;
  }
  99.9% {
    border-right: .15em solid var(--blue-color);
  }
  100% {
  	opacity: 1;
    border: none;
  }
}
@keyframes typing-delay {
  0% {
    width: 0;
  }
  1% {
  	opacity: 1;
  }
  99.9% {
    border-right: .15em solid var(--blue-color);
  }
  100% {
  	opacity: 1;
    border: none;
  }
}

h2
{
    text-align: center;
}

section.about
{
	background: url("../img/bg/bg-white-2.png");
}

.container
{
    padding-top: 20px;
    padding-bottom: 20px;
    overflow: hidden;
}

.col ul
{
    padding: 0 20%;
}

.section-title
{
    font-size: 2.5rem;
    margin-bottom: 0;
}

hr.dark 
{
	border-top: 7px solid var(--black-color);
}

h2.light 
{
	color: var(--white-color);
}

.header-underline
{
    width: 50px;
    height: 3px;
    margin: 2px auto 10px auto;
    background: var(--black-color);
}

section.tl .header-underline 
{
	width: 200px;
}

.header-underline.light
{
	background: var(--white-color);
}

.border-right
{
    border-right: 2px solid rgba(68, 68, 68, .5);
}

hr
{
    margin: -20px 0 30px 0;
    border-top: 7px solid var(--blue-color);

}

section 
{
	padding: 20px 0;
}

section.tl
{
	background-image: url("../img/bg/bg-prism.png");
}

section.projects
{
    background: -moz-linear-gradient(20deg, #0088ff  30%, rgba(0,0,0,0) 30%), -moz-linear-gradient(60deg, #2097ff 60%, #40A6FF 60%);
    background: -o-linear-gradient(20deg, #0088ff  30%, rgba(0,0,0,0) 30%), -o-linear-gradient(60deg, #2097ff 60%, #40A6FF 60%);
    background: linear-gradient(70deg, #0088ff  30%, rgba(0,0,0,0) 30%), linear-gradient(30deg, #2097ff 60%, #40A6FF 60%);
}

section.projects .header-underline
{
    background: var(--white-color);
}

section.projects .section-title
{
    color: var(--white-color);
}

.project-img
{
	background: var(--black-color);
	outline: 2px solid var(--black-color);
}

.card-img-top
{
	outline: 2px solid var(--black-color);
	border-radius: 0%;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

li.project p
{
	color: var(--black-color);
}

li.project
{
	margin: 20px auto;
}

ul.project
{
    list-style-type: none;
}

.hobbies .col-sm-6
{
	vertical-align: middle;
	text-align: center;
}

.hobbies .row
{
	padding: 10px 20%;
}

.hobbies.container
{
	padding-top: 0px;
}

.contact
{
    text-align: center;
    vertical-align: middle;
}

section.contact .row
{
    padding: 0 1rem;
}

.contact > a 
{
	text-decoration: none;
}

footer
{
	background: var(--black-color);
	color: var(--white-color);
	text-align: center;
	padding-top: 1em;
	padding-bottom: 1em;
	margin-bottom: 0;
}

footer>p
{
	margin: 0;
}

footer>a
{
	text-decoration: none;
}

ul.skill
{
    list-style-type: none;
    position: relative;
    padding: 0 10px;
}

li.skill > p::before, li.skill > p::after
{
	content: "";
	display: block;
	position: absolute;
	height: 0;
	width: 0;
	top: 0;
}

ul.left-skew p::before
{
	border-left: 10px solid transparent;
	border-bottom: 37px solid var(--blue-color);
	left: -10px;
}

ul.left-skew p::after
{
	border-right: 10px solid transparent;
	border-top: 37px solid var(--blue-color);
	right: -10px;
}

ul.right-skew p::before
{
	border-left: 10px solid transparent;
	border-top: 37px solid var(--blue-color);
	left: -10px;
}

ul.right-skew p::after
{
	border-right: 10px solid transparent;
	border-bottom: 37px solid var(--blue-color);
	right: -10px;
}

li.skill
{
    margin-bottom: 5px;
    position: relative;
}

li.skill > p
{
	background: var(--blue-color);
	padding-top: 3px;
	padding-bottom: 3px;
    margin: auto;
    text-align: center;
    color: var(--white-color);
}

ul.personal
{
    list-style-type: none;
    padding: 0px 10px;
}

ul.personal > li
{
	margin-bottom: 5px;
    position: relative;
}

ul.personal > li > p
{
	background: var(--blue-color);
	padding-top: 3px;
	padding-bottom: 3px;
    margin: auto;
    text-align: center;
    color: var(--white-color);
}

ul.personal > li > p::before, ul.personal > li > p::after
{
	content: "";
	display: block;
	position: absolute;
	height: 0;
	width: 0;
	top: 0;
}

ul.personal > li > p::before
{
	border-left: 10px solid transparent;
	border-bottom: 37px solid var(--blue-color);
	left: -10px;
}

ul.personal > li > p::after
{
	border-right: 10px solid transparent;
	border-bottom: 37px solid var(--blue-color);
	right: -10px;
}

li.project h2 
{
	font-size: 1.5rem;
	color: var(--white-color);
}

.timeline 
{
    padding: 50px 0;
    position: relative;
}

.timeline-nodes 
{
    padding-bottom: 25px;
    position: relative;
}

.timeline-nodes:nth-child(even) 
{
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
            -webkit-flex-direction: row-reverse;
               -moz-box-orient: horizontal;
               -moz-box-direction: reverse;
                -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
}

.timeline h3, .timeline p 
{
    padding: 5px 15px;
}

.timeline h3
{
    background: var(--blue-color);
    border-radius: 8px 8px 0px 0px;
}

.timeline p, .timeline time 
{
    color: #08f
}

.timeline-content .description
{
	overflow: hidden;
	max-height: 0;
	-webkit-transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
	-o-transition: all 0.8s ease;
	transition: all 0.8s ease;
}

.timeline::before 
{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    border-left: 2px dashed var(--blue-color);
    height: 100%;
    z-index: 1;
    -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
              -o-transform: translateX(-50%);
         transform: translateX(-50%);
}

.timeline-content 
{
    border: 2px solid var(--blue-color);
    position: relative;
    border-radius: 10px 10px 10px 10px;
    background: var(--white-color);
    -webkit-box-shadow: 0px 5px 25px 0px rgba(10, 55, 90, 0.2);
            box-shadow: 0px 5px 25px 0px rgba(10, 55, 90, 0.2)
}

.timeline-nodes:nth-child(odd) h3,
.timeline-nodes:nth-child(odd) p 
{
    text-align: right;
}

.timeline-nodes:nth-child(odd) .timeline-date 
{
    text-align: left;
}
 
.timeline-nodes:nth-child(even) .timeline-date 
{
    text-align: right;
}

.timeline-nodes:nth-child(odd) .timeline-content::after 
{
    content: "";
    position: absolute;
    top: 5px;
    left: 100%;
    width: 0;
    border-left: 10px solid var(--blue-color);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

.timeline-nodes:nth-child(even) .timeline-content::after 
{
    content: "";
    position: absolute;
    top: 5px;
    right: 100%;
    width: 0;
    border-right: 10px solid var(--blue-color);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

.timeline-image 
{
    position: relative;
    z-index: 100;
    height: 60px;
    width: 60px;
}

.timeline-image::before 
{
    content: "";
    width: 80px;
    height: 80px;
    border: 2px solid var(--blue-color);
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
            -moz-transform: translate(-50%,-50%);
              -o-transform: translate(-50%,-50%);
         transform: translate(-50%,-50%);
    background-color: var(--white-color);
    z-index: 1;
}

.timeline-image img 
{
	width: auto;
	height: 100%;
    position: relative;
    z-index: 100;
    border-radius: 25%;
}

.timeline-content:hover .description 
{
	max-height: 180px;
	display: block;
}

.description > p
{
	margin-bottom: 0.5rem;
}

.timeline-content
{
	background: var(--blue-color);
}

.timeline-content:hover
{
	background: var(--white-color);
}

.card 
{
	transition: all 0.1s ease-in-out;
	border: 3px solid var(--black-color);
	border-radius: 0%;
	outline: none;
}

.card:hover
{
	outline: 3px solid var(--black-color);
}

.card + .card 
{
	margin-top: 20px;
}

.card-body
{
	display: flex;
	flex-direction: column;
}

.card-text
{
	margin-bottom: auto;
	vertical-align: top;
}

.center
{
	text-align: center;
}

.box
{
	display: flex;
	flex-direction: column;
}

.box-fill
{
	flex: 1;
}

.tags
{
	list-style: none;
	margin-top: auto;
	overflow: hidden;
	margin-bottom: -5px;
	padding-left: 0;
	padding-top: 7px;
}

.tags li
{
	float: left;
}

.tag
{
	background: var(--blue-color);
	border-radius: 3px;
	color: var(--white-color);
	display: inline-block;
	height: 30px;
	line-height: 30px;
	position: relative;
	margin-right: 10px;
	padding: 0 15px;
	margin-bottom: 5px;
}

@media (max-width:1200px)
{
	ul.personal > li:nth-child(1) > p::before, ul.personal > li:nth-child(2) > p::before, ul.personal > li:nth-child(4) > p::before
	{
		border-left: 10px solid transparent;
		border-bottom: 68px solid var(--blue-color);
		left: -10px;
	}

	ul.personal > li:nth-child(1) > p::after, ul.personal > li:nth-child(2) > p::after, ul.personal > li:nth-child(4) > p::after
	{
		border-right: 10px solid transparent;
		border-bottom: 68px solid var(--blue-color);
		right: -10px;
	}
}

@media (max-width: 991px)
{

	ul.personal > li:nth-child(3) > p::before
	{
		border-left: 10px solid transparent;
		border-bottom: 68px solid var(--blue-color);
		left: -10px;
	}

	ul.personal > li:nth-child(3) > p::after
	{
		border-right: 10px solid transparent;
		border-bottom: 68px solid var(--blue-color);
		right: -10px;
	}
}

/*small device style*/
@media (max-width: 767px) 
{
	#intro h2
	{
		font-size: 1.5rem;
	}

    .timeline-nodes:nth-child(odd) h3,
    .timeline-nodes:nth-child(odd) p 
    {
    	text-align: left
	}

	.timeline-nodes:nth-child(even) 
	{
	    -webkit-box-orient: horizontal;
	    -webkit-box-direction: normal;
	            -webkit-flex-direction: row;
	               -moz-box-orient: horizontal;
	               -moz-box-direction: normal;
	                -ms-flex-direction: row;
	            flex-direction: row;
	}

    .timeline::before
    {
	    content: "";
	    display: block;
	    position: absolute;
	    top: 0;
	    left: 4%;
	    width: 0;
	    border-left: 2px dashed var(--blue-color);
	    height: 100%;
	    z-index: 1;
	    -webkit-transform: translateX(-50%);
	            -moz-transform: translateX(-50%);
	              -o-transform: translateX(-50%);
	         transform: translateX(-50%);
	}

	.timeline h3 
	{
	    font-size: 1.7rem;
	}

	.timeline p 
	{
	    font-size: 14px;
	}

	.timeline-image 
	{
	    position: absolute;
	    left: 0%;
	    top: 60px;
	    /*transform: translateX(-50%;);*/
	}

	.timeline-nodes:nth-child(odd) .timeline-content::after 
	{
	    content: "";
	    position: absolute;
	    top: 5%;
	    left: auto;
	    right: 100%;
	    width: 0;
	    border-left: 0;
	    border-right: 10px solid var(--blue-color);
	    border-top: 10px solid transparent;
	    border-bottom: 10px solid transparent;
	}

	.timeline-nodes:nth-child(even) .timeline-content::after 
	{
	    content: "";
	    position: absolute;
	    top: 5%;
	    right: 100%;
	    width: 0;
	    border-right: 10px solid var(--blue-color);
	    border-top: 10px solid transparent;
	    border-bottom: 10px solid transparent;
	}

	.timeline-nodes:nth-child(even) .timeline-date 
	{
	    text-align: left;
	}

	.timeline-image::before 
	{
	    width: 65px;
	    height: 65px;
	}

	.timeline-image 
	{
	    height: 45px;
	    width: 45px;
	}

	ul.personal > li:nth-child(2) > p::before, ul.personal > li:nth-child(4) > p::before
	{
		border-left: 10px solid transparent;
		border-bottom: 99px solid var(--blue-color);
		left: -10px;
	}

	ul.personal > li:nth-child(2) > p::after, ul.personal > li:nth-child(4) > p::after
	{
		border-right: 10px solid transparent;
		border-bottom: 99px solid var(--blue-color);
		right: -10px;
	}
}

/*extra small device style */
@media (max-width: 575px) 
{
	#intro h2 
	{
		font-size: 4vw;
	}
    .timeline::before 
    {
	    content: "";
	    display: block;
	    position: absolute;
	    top: 0;
	    left: 3%;
	}

	.timeline-image 
	{
	    position: absolute;
	    left: -4%;
	}

	.timeline-image::before 
	{
	    width: 60px;
	    height: 60px;
	}

	.border-right 
	{
		border-right: none;
	}

	section.contact .row
	{
	    padding: 0 30px;
	}

	ul.personal > li > p
	{
		margin: 0 -100px;
		padding: 0	100px;
	}

	ul.personal > li > p::before
	{
		border: none!important;
	}

	ul.personal > li > p::after
	{
		border: none!important;
	}
}