:root {
  --main-bg-color: #293849;
  --secondary-bg-color: #BED95C;
  --alternativeSectionBackground: #F7F7F7;
  --iconImageColor: #FFFFFF;
  --headerFontColor: #FFFFFF;
  --headerHoverFontColor: #000000;
}

body {
	margin:0;
	padding:0;
	font-family: "Roboto";
    font-size: 17px;
    font-style: normal;
    font-weight: 300;
    text-transform: none;
    line-height: 29px;
    letter-spacing: 0px;
	text-align: justify;
}

div.mainContainer {
	width: 100%;
	display: block;
}

div.circleIcon {
	border-radius: 50%;
	background-color: var(--secondary-bg-color);
	height: 50px;
	width: 50px;
	margin: auto;
	position: relative;
}

div.circleIcon > i{
	position: absolute;
	left: 34%;
	top: 34%;
	color: var(--iconImageColor);
	transform: scale(1.5);
}

/* HEADER */

div.headerContainer {
	background-color: var(--main-bg-color);
	min-height: 55px;
	width: 100%;
	position: fixed;
    z-index: 1;
	display: flex;
	justify-content: stretch;
}

div.headerContent {
	width: 80%;
	margin: auto;
	display: flex;
	justify-content: flex-end;
}

div.languagesContainer {
	margin: auto;
}

div.languagesContainer img {
	border-radius: 50%;
    border: 3px solid var(--headerFontColor);
	cursor: pointer;
}

div.sectionsHeader {
	width: 100%;
	display: flex;
	justify-content: space-around;
}

div.sectionsHeader a {
	text-decoration: none;
	color: var(--headerFontColor);
	font-weight: 400;
}

div.sectionsHeader > div {
	display: block; 
	margin: auto;
}

div.sectionsHeader hr {
	margin: 0;
	border: 1px solid var(--secondary-bg-color);
}

ul.navMenuMobile {
	padding: 0px 10px;
	position: absolute;
	left: 0px;
	top: 55px;
	background-color: var(--main-bg-color);
	width: 150px;
	padding-bottom: 20px;
}

ul.mainNavMenuMobile li {
	list-style-type: none;
}

ul.navMenuMobile li {
    list-style-type: none;

	padding: 20px 10px;
}

ul.navMenuMobile li:hover {
	background-color: var(--headerFontColor);
}

ul.navMenuMobile li:hover a {
	color: var(--headerHoverFontColor);
}

ul.navMenuMobile li a {
    color: var(--headerFontColor);
    text-decoration: none;
	border-bottom: 2px solid var(--secondary-bg-color);
}

ul.mainNavMenuMobile {
	padding: 0px;
}

ul.mainNavMenuMobile > ul {
	display: none;
}

div.containerMenuMobile {
	display: none;
}

div.menuIcon {
	margin: auto;
}

div.menuIcon i {
	cursor: pointer;
	color: var(--headerFontColor);
	transform: scale(2.0);
    position: absolute;
    top: 35%;
}

/* END HEADER */

/* PROFILE CONTAINER */

div.backgroundSection {
	display: block;
	align-items: center;
	padding: 90px 0px;
	background-image: url("images/profile/profileBackground.webp");
	background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

div.mainPhoto {
	margin:auto;
	width: 170px;
}

div.mainPhoto > img {
	border-radius: 50%;
}

div.nameContainer {
	text-align: center;
}

div.jobDescriptionContainer {
	text-align: center;
	font-size: 36px;
	margin: 30px 0px;
	color: var(--secondary-bg-color);
}

h1 {
	font-size: 76px;
	color: #ffffff;
	margin: 30px 0px;
	font: normal 57px / 60px "Open Sans",Helvetica,Arial,Verdana,sans-serif;
}

/* END PROFILE CONTAINER */

/* SECTION CONTAINER */

.sectionContainer {
	width: 80%;
	display: block;
	padding: 90px 0px;
	margin: auto;
}

.alternativeSectionContainer {
	width: 100%;
	display: block;
	margin: auto;
}

/* END SECTION CONTAINER */

/* SECTION TITLE */

.sectionTitle {
	display: block;
    align-items: center;
    align-content: center;
    justify-content: center;
	font-size: 57px;
	font-weight: 400;
	text-align: center;
}
.sectionTitle p {
	margin: 0px;
}

.sectionTitle hr {
	width: 90px;
	border: 2px solid var(--secondary-bg-color);
}

/* END SECTION TITLE */

/* ABOUT ME CONTAINER */

div.personalInfoContainer {
	width: 100%;
	display: flex;
}

div.aboutMeDescription {
	width: 30%;
}

div.secondaryProfilePhoto {
	background-image: url("images/profile/secondaryProfilePhoto.webp");
	background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;	
	width: 300px;
    height: 300px;
}

div.personalInfo {
	padding: 0px 90px;
}

div.personalInfo span {
	font-weight: 400;
}

div.personalInfo a {
	color: black;
	text-decoration: none;
}

div.personalInfoAndDescriptionContainer {
	display: flex;
}

div.downloadCVButton {
	background-color: #bed95c;
    background: #bed95c;
	border-radius: 4px;
}

div.downloadCVButton a {
	display: block;
	color: #ffffff;
	font-weight: 600;
	text-decoration: none;
	padding: 10px;
	text-align: center;
}

.downloadCVButton:hover {	
	box-shadow: 0 5px 16px 0 rgba(0,0,0,0.9);
    transition: all .5s ease;
}

/* END ABOUT ME CONTAINER */


/* EXPERIENCE CONTAINER */

div.alternativeContainerBackground {
	background-color: var(--alternativeSectionBackground);
}

div.experienceInfoContainer {
	display: block;
	padding-top: 0px
}

div.experienceInfoContainer > div{
	width: 100%;
	display: flex
}

div.companyExperience {
	width: 25%;
}

div.jobDescriptionExperience {
	width: 50%;	
}

div.workPositionExperience {
	width: 15%;
	margin-left: 5%;
	margin-right: 5%;
}

/* END EXPERIENCE CONTAINER */


/* EDUCATION CONTAINER */

div.educationInfoContainer {
	display: flex;
	width: 100%;
	justify-content: space-around;
}

div.educationInfoContainer > div {
	width: 30%;
	display: block;
	padding-right: 5%;
}

div.educationInfoContainer > div:last-child {
	padding-right: 0px;
}

p.title {
    font-size: 25px;
    font-weight: 400;
}

p.subtitle {
    font-weight: 500;
	color: gray;
}

/* END EDUCATION CONTAINER */

/* SKILLS CONTAINER */

div.skillsInfoContainer {
	display: block;
	width: 100%;
}

div.skillsInfoContainer > div {
	width: 100%;
	display: flex;
}

div.skillsInfoContainer > div > div{
	width: 50%;
	display: block;
}

i.checkSkill {
	transform: translateY(4px);
}

/* END SKILLS CONTAINER */

/* CONTACT CONTAINER */

div.contactContainer{
	padding-top: 0px;
}

div.contactContainer p{
	color: #ffffff;
}

div.contactContainer a{
	text-decoration: none;
}

div.contactContainer img{
	background-color: #ffffff;
}

i.socialMediaLogo {
	color: var(--iconImageColor);
	transform: scale(1.8);
    position: absolute;
    top: 29%;
    left: 35%;
}

/* END CONTACT CONTAINER */


@media (max-width:800px) {

.sectionContainer {
	width: 98%;
}

div.secondaryProfilePhoto {
    margin: auto;
}

div.personalInfo {
    padding: 0px;
}

div.personalInfoAndDescriptionContainer, div.personalInfoContainer, div.educationInfoContainer {
	display: block;
}	

div.aboutMeDescription {
	width: 100%;
}

div.educationInfoContainer > div {
	width: 100%;
	padding-bottom: 90px;
	padding-right: 0px;
}

div.educationInfoContainer > div:last-child {
	padding-bottom: 0px;
}

p.title {
	text-align: center;
}

div.experienceInfoContainer > div{
	display: block;
}

div.companyExperience {
	width: 100%;
}

div.jobDescriptionExperience {
	width: 100%;	
}

div.workPositionExperience {
	width: 100%;
	margin-left: 0%;
	margin-right: 0%;
}

div.sectionsHeader {
	display: none;
}

div.containerMenuMobile {
	display: block;
	width: 100%;
}

div.skillsInfoContainer > div {
	display: block;
}

div.skillsInfoContainer > div > div{
	width: 100%;
}

div.skillsInfoContainer > div > div p.title{
	text-align: center;
}
	
}





@media (max-width:1240px) and (min-width:800px) {

.sectionContainer {
	width: 96%;
}

div.personalInfoContainer, div.educationInfoContainer {
	display: block;
}

div.personalInfo {
    padding: 0px 0px 0px 90px;
}

div.aboutMeDescription {
	width: 100%;
}

div.educationInfoContainer > div {
	width: 100%;
	padding-bottom: 90px;
	padding-right: 0px;
}

div.educationInfoContainer > div:last-child {
	padding-bottom: 0px;
}

div.experienceInfoContainer > div{
	display: block;
}

div.companyExperience {
	width: 100%;
}

div.jobDescriptionExperience {
	width: 100%;	
}

div.workPositionExperience {
	width: 100%;
	margin-left: 0%;
	margin-right: 0%;
}

div.skillsInfoContainer > div {
	display: block;
}

div.skillsInfoContainer > div > div{
	width: 100%;
}

div.skillsInfoContainer > div > div p.title{
	text-align: center;
}

}