@font-face {
	font-family: 'Raleway';
	src: url('../res/font/Raleway-Regular.ttf');
}
@font-face {
	font-family: 'Raleway';
	font-style: italic;
	src: url('../res/font/Raleway-Italic.ttf');
}
@font-face {
	font-family: 'Raleway';
	font-weight: bold;
	src: url('../res/font/Raleway-Bold.ttf');
}

:root {
  --main-color: #06A763;
  --second-color:  #dd2fb3;
  --bg-color: #f5f5f5;
  --divider-color: #616161;
	--text-color:  #7a93b9;
}

body {
  background-color: var(--bg-color);
}

section {
  margin-top: 4em;
  margin-bottom: 1.5em;
}

section#aboutme {
  margin-top: 0;
}

section#education {
	margin-top: 9.5em;
}

section#interest {
	margin-top: 7.5em;
}

button,
a.btn {
  background-color: var(--main-color)!important;
}

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

li {
	font-size: 16px;
	line-height: 21px;
	margin-bottom: 10px;
}

.section-title {
  text-align: center;
  font-size: 2.18rem;
  font-weight: 600;
  font-family: 'Raleway', sans-serif;
}

.section-title img {
  width: 66px;
  padding: 10px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  margin: -2px 12px 12px 12px;
}

.divider {
  border: 1px solid var(--divider-color);
  opacity: 0.2;
}

section#experience .card-body,
section#education .card-body {
	padding-bottom: 0.5em !important;
	padding-right: 1.5em !important;
}

/* ============
 * HEADER
 * ============ */

.banner {
  width: 100%;
  height: 500px;
  margin-bottom: -25em;
  position: relative;
  background-image: url("../res/img/banner4.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
  filter: blur(1px);
}

/* ============
 * IDENTIDY CARD
 * ============ */

.idcard {
  background-color: var(--main-color);
  color: white;
  font-family: 'Raleway', sans-serif;

  box-shadow: 0 .5rem 1.5rem rgba(22, 28, 45, .3);
}

.idcard h3 {
  font-weight: bold;
  font-size: 34px;
	margin-bottom: -5px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.29);
}

.idcard h5 {
  font-weight: normal;
  font-size: 18px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.29);
}

.idcard ul {
  padding: 0;
}

.idcard li {
  list-style-type: none;
}

.idcard li span {
  padding-left: 7px;
}

.idcard li img {
  width: 25px;
}

.idcard a,
.idcard a:focus,
.idcard a:visited,
.idcard a:hover {
  color: inherit;
}

.social-network a {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  padding: 9px;
  border-radius: 100%;
}

.idcard-left {
  padding-top: 4rem;
  padding-bottom: 3.5rem;
  padding-left: 2.25rem;

  flex-grow: 2
}

.idcard-right {
  background-size: cover;
  width: 300px;
  background-image: url("../res/img/profile2.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  flex-grow: 1;
  position: relative
}

.slope {
  width: 140px;
  height: 100%;
  background: var(--main-color);
  transform: skew(-11deg);

  position: absolute;
  left: -80px;
}


/* ============
 * ABOUT ME
 * ============ */

.picture {
  width: 24em;
}

/* ============
 * SKILL
 * ============ */

.skill-table {
  background-color: var(--main-color);
  color: white;

  padding-top: 3rem;
  padding-bottom: 3.5rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  box-shadow: 0 .5rem 1.5rem rgba(22, 28, 45, .3);

}

.skillbar {
  position: relative;
  margin-bottom: 1rem;
}

.skill-table-section {
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-weight: bold;
  font-size: 24px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.29);
}

.skillbar-title {
  margin-bottom: 2px;
  font-size: 16px;
}

.skillbar-percent {
  position: absolute;
  font-size: 0.9rem;
  top: 8px;
  right: 0;
}

.progress {
  height: 4px;
  background-color: rgba(22, 28, 45, .2);
}

/* ============
 * EXPERIENCE
 * ============ */

.xp-card {
  border-left: 5px solid var(--second-color);
	border-radius: unset !important;
	width: 50%;
	position: relative;
	margin-bottom: -100px;
}

.xp-card-dot {
	position: absolute;
  background-color: var(--main-color);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  border-radius: 100%;
  top: 25px;
  z-index: 5;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.29);
	width: 54px;
	height: 54px;
	font-weight: bold;
	color: white;
	font-size: 35px;
	font-family: 'Raleway', sans-serif;
	text-align: center;
}

.timeline-left .xp-card-dot {
	right: -79px;
}

.timeline-right .xp-card-dot {
	left: -79px;
}

.xp-title {
  font-weight: bold;
  font-size: 24px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}

.xp-company {
  font-size: 18px;
  opacity: 0.7;
}

.subtitle {
	text-transform: uppercase;
	font-style: italic;
	font-weight: bold;
}

/* ============
 * EDUCATION
 * ============ */

.timeline-card {
  border-left: 5px solid var(--second-color);
	border-radius: unset !important;
	width: 50%;
	position: relative;

	margin-bottom: -50px;
}

.timeline-dot {
	position: absolute;
  background-color: var(--main-color);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  padding: 9px;
  border-radius: 100%;
  top: 25px;
  z-index: 5;
}

.timeline-left .timeline-dot {
	right: -79px;
}

.timeline-right .timeline-dot {
	left: -79px;
}

.timeline-title {
  font-weight: bold;
  font-size: 24px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}

.timeline-school {
  font-size: 18px;
  opacity: 0.7;
}

/* ============
 * TIMELINE
 * ============ */

.timeline {
	position: relative;
	z-index: 10;
}

/* timeline ruler */
.timeline::before {
	content: '';
	position: absolute;
	width: 5px;
	background-color: var(--main-color);
	opacity: 0.4;
	top: 0;
	bottom: 0;
	left: 50%;
}

.timeline-left {
	left: 0;
	margin-left: -50px;
}

.timeline-right {
	left: 50%;
	margin-left: 50px;
}

/* horizontal rulers for left containers */
.timeline-left::before {
	content: '';
	position: absolute;
	top: 50px;
	right: -60px;
	background-color: var(--main-color);
	width: 60px;
	height: 5px;
	opacity: 0.4;
	z-index: 1;
}

/* horizontal rulers for right containers */
.timeline-right::before {
	content: '';
	position: absolute;
	top: 50px;
	left: -64px;
	background-color: var(--main-color);
	width: 60px;
	height: 5px;
	opacity: 0.4;
	z-index: 1;
}



/* ============
 * INTEREST
 * ============ */

#interest h3 {
	font-weight: bold;
  font-size: 21px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}

#interest a {
	cursor: auto;
}

/* ============
 * FOOTER
 * ============ */

footer {
	margin-top: 4em;
}

footer p {
	text-align: center;
	color: #425065;
	opacity: 0.8;
	font-size: 15px;
}

/* ============
 * SCROLL
 * ============ */

 .scroll-top {
   height: 50px;
   width: 50px;
   font-size: 28px;
   padding: 5px;
   background: var(--second-color);
   text-align: center;
   box-shadow: rgba(0, 0, 0, 0.18) 0px 5px 11px 0px, rgba(0, 0, 0, 0.15) 0px 4px 15px 0px;
   position: fixed;
   bottom: 21px;
   right: 18px;
   z-index: 5;

	 display: none;
 }

 a.scroll-top:hover,
 a.scroll-top:visited,
 a.scroll-top:focus
 {
	 text-decoration: none;
 }

 /* =============
 	*	MEDIA QUERIES
	* ============ */
@media screen and (max-width: 991px) {
	.slope {
		left: -12px;
		width: 65px;
		transform: skew(-3deg);
		/* background-color: yellow; */
	}

}

@media screen and (max-width: 767px) {

	section#idcard {
		margin-top: 6em;
	}

	section#education,
	section#interest {
		margin-top: 4.5em;
	}

.timeline-title {
	font-size: 21px;
}

.timeline-card {
	width: 100%;
	margin-bottom: 30px;
}

.timeline-left {
  margin-left: 0;
}

.timeline-left::before {
  opacity: 0;
}

.timeline-right {
  margin-left: 0;
	left: 0;
}

.timeline-right::before {
  opacity: 0;
}

.timeline-dot {
	/* top: -15px; */
	visibility: hidden;
}
/* .timeline-left .timeline-dot {
	right: 470px;
}
.timeline-right .timeline-dot {
	left: -30px;
} */

.xp-card {
	width: 100%;
	margin-bottom: 30px;
}
.xp-title {
	font-size: 21px;
}
.xp-card-dot {
	/* top: -15px; */
	visibility: hidden;
}
/* .timeline-left .xp-card-dot {
	right: 470px;
}
	.timeline-right .xp-card-dot {
	left: -30px;
} */

.idcard-left {
	flex-grow: auto;
	width: 100%;
	padding: 3rem 1rem;
}

.idcard-left h3,
.idcard-left h5 {
	text-align: center;
}

.idcard ul {
	margin: 0 auto;
	display: table;
}

.social-network {
		margin-left: -10%;
}

.avatar-profile {
	width: 140px;
	height: 140px;
	border-radius: 100%;
	position: absolute;
	top: -95px;
	left: 39%;

	background-image: url("../res/img/profile2.jpg");
	background-size: cover;
	background-position: center center;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.container {
	max-width: none;
}

}

@media screen and (max-width: 575px) {
	.timeline-dot,
	.xp-card-dot {
		visibility: hidden;
	}
}