input, textarea, button, select, a, div {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@font-face {
	font-family: regularFont;
	src: url(./font/Roboto-Regular.ttf);
}

html {
	height: -webkit-fill-available;
}

body {
	margin: 0;
	padding: 0;
	font-family: regularFont;
	line-height: auto;
}

.main {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	height: auto;
	display: flex;
}

.leftside {
	position: fixed;
	z-index: 20;
	display: inline-block;
	width: 320px;
	background-color: #f2f3f7;
	min-height: 100vh;
	min-height: -webkit-fill-available;
	text-align: center;
	justify-content: center;
	transition: .3s ease-in-out;
}

.rightside {
	display: inline-block;
	width: 100%;
	max-width: 780px;
	height: auto;
	margin-left: 320px;
	transition: .3s ease-in-out;
}

.profile img {
	position: relative;
	width: 160px;
	height: 160px;
	border-radius: 100%;
	margin-top: 40px;
}

.name {
	font-size: 26px;
	font-weight: 550;
	margin-top: 30px;
	font-family: regularFont;
}

.subname {
	font-size: 14px;
	color: #777;
	margin-top: 8px;
}

.navigation ul li {
	list-style-type: none;
	margin: 0 auto;
	padding-bottom: 15px;
	font-size: 20px;
}

.navLink {
	display: inline-block;
	color: #777;
	text-decoration: none;
	cursor: pointer;
}

.navigation {
	margin-left: -43px;
	margin-top: 35px;
}

.underline {
	height: 1px;
	background-color: #02b0e0;
	transform: scaleX(0);
	transition: transform .2s ease-out;
}

.navLink:hover .underline {
	transform: scaleX(1);
}

.footer {
	font-size: 13px;
	color: #777;
	margin-top: 30px;
}

.social {
	width: 100%;
	height: auto;
	padding-inline-start: 0px;
	margin-top: 7px;
}

.social a {
	text-decoration: none;
	color: #777;
	font-size: 18px;
}

.social li {
	display: inline-block;
	margin: 0 auto;
	transition: color .15s ease-in-out;
	padding: 0 2px;
}

.social li:hover {
	color: rgb(82, 82, 82);
}

.languageSelect {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-top: 10px;
}

.language {
	width: 22px;
	height: 15px;
	margin: 5px;
	background-position: center;
	background-size: cover;
	border: 2px solid #f2f3f7;
	cursor: pointer;
}

.english {
	background-image: url('./Images/english.png');
}

.romanian {
	background-image: url('./Images/romanian.png');
}

@media only screen and (max-height: 750px) {
	.profile img {
		margin-top: 10px;
	}
	.name {
		margin-top: 10px;
	}
	.navigation {
		margin-top: 10px;
	}
	.footer {
		margin-top: 10px;
	}
}

@media only screen and (max-height: 650px) {
	.profile img {
		width: 70px;
		height: 70px;
	}
	.navigation ul li {
		font-size: 13px;
	}
}

@media only screen and (max-height: 500px) {
	.profile img {
		display: none;
	}
}

.banner {
	position: relative;
	width: 100%;
	height: 100vh;
	background-image: url('../Images/banner1.jpg');
	background-position: top right;
	background-size: cover;
}

.banner-text {
	position: relative;
	padding-top: 33vh;
	padding-left: 50px;
}

@media only screen and (max-width: 350px) {
	.banner-text {
		padding-left: 20px;
	}
}

.banner-big-text {
	font-size: 60px;
}

.banner-small-text {
	font-size: 18px;
	color: rgb(99, 99, 99);
}

.banner-button {
	padding: 10px 20px;
	margin-top: 10px;
	font-size: 13px;
	color: #02b0e0;
	border: 1px solid #02b0e0;
	background-color: rgba(243, 243, 243, 0.829);
	border-radius:5px;
	cursor: pointer;
	transition: 0.15s ease;
}

.banner-button:hover {
	color: #0393bb;
	border-color: #0393bb;
}

.about {
	max-width: 100%;
	height: auto;
	color: black;
	padding: 40px;
	margin-top: 50px;
}

.smallTitle {
	font-size: 15px;
	color: #777;
	padding-bottom: 10px;
}

.bigTitle {
	font-size: 26px;
	padding-bottom: 30px;
}

.about-content {
	font-size: 18px;
	color: #777;
	padding-left: 5px;
	padding-right: 5px;
}

.education, .training,.achivement, .experience {
	max-width: 100%;
	height: auto;
	color: black;
	padding: 40px;
	margin-top: 30px;
}

.education-tile,.achivement-tile, .experience-tile{
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	height: auto;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 20px;
}

.trainingFlex{
	display: flex;
	flex-wrap: wrap;
}

.training-tile{
	width: 48%;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	height: auto;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 20px;
	color:#777;
}

@media only screen and (max-width: 915px) {
	.training-tile {
		width: 100%;
	}
}

.colorBox {
	height: auto;
	width: 50px;
	opacity: 0.8;
}

.colorBoxAchivement, .logoBoxExperience{
	opacity:0.8;
	color:yellow;
	background:#ec5554;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size:30px;
	padding:0 20px;
}

.tileContent {
	width: 100%;
	background-color: rgba(241, 241, 241, 0.747);
	position: relative;
}

.tileText {
	position: relative;
	padding: 20px;
	font-size: 17px;
	color:#777;
}

.educationyear,.achivementyear, .experienceyear {
	color: #02b0e0;
	font-size: 12px;
}

.skills {
	max-width: 100%;
	height: auto;
	color: black;
	padding: 40px;
	margin-top: 50px;
}

.skillTile {
	max-width: 100%;
	padding-left: 5px;
	padding-right: 5px;
	margin: 0 auto;
	margin-bottom: 30px;
	background-color: rgba(241, 241, 241, 0.747);
	height: auto;
}

.skillTitle {
	font-size: 23px;
	padding: 8px 0 0 8px;
	color: #777;
}

.skillArea {
	max-width: 100%;
	margin: 0 auto;
	margin: 10px 10px 15px 10px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.skillImage {
	height: 30px;
	width: auto;
	padding: 6px 10px 6px 10px;
}

.experience .company{
	font-weight: bold;
	font-size:22px;
}

.projects {
	max-width: 100%;
	height: auto;
	color: black;
	padding: 40px;
	margin-top: 50px;
}

.project-categories {
	padding-inline-start: 2px;
}

.projects-bigTitle {
	padding-bottom: 10px;
}

.projectLi {
	color: #777;
}

.selected {
	color: #02b0e0;
}

.project-categories li {
	list-style-type: none;
	display: inline;
	padding-right: 30px;
	cursor: pointer;
}

.projectArea {
	width: 100%;
	height: auto;
}

.projectsFlexContainer {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.project-tile {
	width: 100%;
	max-width: 300px;
	max-height: 350px;
	margin: 0 auto;
	margin-bottom: 20px;
	cursor: pointer;
	padding: 10px;
}

.project-image {
	width: 100%;
	height: 200px;
	background-position: center;
	background-size: cover;
}

.project-content {
	background-color: #f2f3f7;
	height: auto;
	max-width: 100%;
	padding: 10px 10px 0 10px;
}

.project-title {
	font-size:20px;
	padding-bottom: 5px;
}

.hidden {
	display: none;
}

.project-description {
	color: #777;
	padding-bottom: 15px;
	font-size: 16px;
}

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

@media only screen and (max-width: 1060px) and (min-width: 781px) {
	.project-tile {
		max-width: none;
	}
}

@media only screen and (max-width: 736px) {
	.project-tile {
		max-width: none;
	}
}

.art, .web {
	display: none;
}

.buttonFlexContainer {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.viewMore {
	padding: 10px 50px;
	margin-top: 20px;
	background-color: #2d98f0;
	outline: none;
	border: none;
	color: white;
	border-radius: 3px;
	transition: 0.15s ease-in-out background;
	cursor: pointer;
}

.viewMore:hover {
	background-color: #3ca4fa;
}

.contact {
	max-width: 100%;
	height: auto;
	color: black;
	padding: 40px;
	margin-top: 50px;
}

.contactArea {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

.column1 {
	width: 50%;
}

.contact-tile {
	width: 100%;
	height: auto;
	display: flex;
	margin-bottom: 30px;
}

.contact-square {
	width: 80px;
	height: 80px;
	background-color: #f2f3f7;
	color: #2d98f0;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 33px;
	border-radius: 3px;
}

.contact-text {
	font-size: 17px;
	margin-top: 30px;
	margin-left: 20px;
	color: #2d98f0;
}

.column2 {
	width: 50%;
	position: relative;
}

.inputBox {
	width: 100%;
	height: auto;
	overflow: hidden;
	margin-bottom: 20px;
}

.column2 input {
	width: 100%;
	outline: none;
	border: none;
	background-color: #f2f3f7;
	padding: 15px 10px;
	font-size: 14px;
}

.inputUnderline {
	width: 100%;
	height: 0.9px;
	background-color: #2d98f0;
	transition: transform .3s ease-in-out;
	transform: scaleX(0);
}

.contactInput:focus+.inputUnderline {
	transform: scaleX(1);
}

.column2 textarea {
	width: 100%;
	outline: none;
	border: none;
	background-color: #f2f3f7;
	height: 80px;
	resize: none;
	overflow: auto;
	padding: 15px 10px;
	font-size: 15px;
}

.column2 button {
	font-size:15px;
	width: 140px;
	padding: 10px;
	outline: none;
	border: none;
	background-color: #2d98f0;
	color: white;
	border-radius: 3px;
	margin-top: -10px;
	cursor: pointer;
	transition: .15s ease-in-out background;
}

.column2 button:hover {
	background-color: #3ca4fa;
}

/* Navbar getting closed */

@media only screen and (max-width: 780px) {
	.leftside {
		transform: translateX(-320px);
	}
	.rightside {
		margin-left: 0px;
	}
}

/* Contact flex direction */

@media only screen and (max-width: 990px) and (min-width: 780px) {
	.contactArea {
		flex-wrap: wrap;
	}
	.column1, .column2 {
		width: 100%;
	}
}

@media only screen and (max-width: 660px) {
	.contactArea {
		flex-wrap: wrap;
	}
	.column1, .column2 {
		width: 100%;
	}
}

.hamburgerIcon {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 30;
	cursor: pointer;
	display: none;
	transition: .3s ease-in-out;
}

.line {
	width: 30px;
	height: 3px;
	background-color: black;
	transition: 0.3s ease-in-out;
}

.line2 {
	margin-top: 5px;
}

.line3 {
	margin-top: 5px;
}

@media only screen and (max-width: 780px) {
	.hamburgerIcon {
		display: block;
	}
}