html {font-size:10px;scroll-behavior: smooth;}

body {
		background-color:lightgray;
		display:grid; grid-template-columns:repeat(12,1fr);
}

* {box-sizing:border-box;}

a.anchor { display: block; position: relative; top: -5rem; visibility: hidden;}

.grid-header{grid-column-start:1;grid-column-end:13;height:15rem;background-image:url('../img/hd.png');background-size:100% 100%; background-repeat:no-repeat;}
.title {grid-column-start:2; grid-column-end:12;height:10rem; text-align:center;font-size:4.2rem;margin:5rem;}

.prz {grid-column-start:1;grid-column-end:13;display:grid; grid-template-columns:repeat(12,1fr);}
.prezentare1 {display:block;height:55rem;grid-column-start:2; grid-column-end:12;padding:4rem 1rem;}
.prezentare2 {display:none;}
.proiecte1 {display:block;height:20rem;grid-column-start:3; grid-column-end:11;border-radius:15%;margin-top:2rem;margin-bottom:5rem;}
.proiecte2 {display:block; height:20rem;grid-column-start:3; grid-column-end:11;border-radius:15%;margin-top:2rem;margin-bottom:5rem;}
.proiecte3 {display:block; height:20rem;grid-column-start:3; grid-column-end:11;border-radius:15%;margin-top:2rem;margin-bottom:5rem;}
.prezprj {height:60rem;grid-column-start:1; grid-column-end:13;}
.prezentareprj1 {display:block; height:auto;grid-column-start:2; grid-column-end:12;text-align:center;padding-top:1rem;}
.prezentareprj2 {display:block; height:auto;grid-column-start:2; grid-column-end:12;text-align:center;padding-top:1rem;}
.grid-footer {height:19rem; grid-column-start:1; grid-column-end:13;background-color:darkgray;}

/*navigation*/

.bar {display:flex;height:5rem;width:100%;justify-content:space-between; align-items:center;padding:0.75rem;position:fixed; z-index: 999;background-color:rgba(0,0,0,0.2);}
		.logo { display:inline-block;}
			.logo > img { height:2.5rem;}
		.language > a > img {display:inline-block;height:2.7rem;}
		.language1 {display:none;}	
		.navigation { display:none;}
			.navigation > a { display:inline-block;font-size:1.4rem; color:white; text-decoration:none;margin:0.5rem 1rem}
			.navigation > a:last-child { margin-right:0;}
		.burger{background-color:gray;height:5rem;width:5rem;display:inline-block;z-index: 999;border-radius: 10px;}
		#burger-menu{background-color:lightgray;position:fixed;left:-250px;height:100vh;width:30rem;display:none;padding-top: 6rem;z-index: 900;}
		#burger-menu a {display:block;font-size:4rem;background-color:lightsteelblue;color:black;text-decoration:none;margin:2rem 1rem;margin-bottom:0.2rem;border:1px groove aqua;border-radius:5px;padding-left: 1rem;}
		#burger-menu a:active{background-color:white;}

		.open {position: relative; animation-name: example1; animation-duration: 1s;animation-fill-mode: forwards;}
		.close {position: relative; animation-name: example2; animation-duration: 1s;animation-fill-mode: forwards;}
		@keyframes example1 {
		0%   {left:-250px; top:0px;}
		100% {left:0px; top:0px;}
		}

		@keyframes example2 {
			0% {left:0px; top:0px;}
			100% {left:-250px; top:0px;}
		}


/*navigation*/			

/*hero*/
.eu {display:block;width:15rem; border-radius:50%}		
.despre {display:block;margin-top:3rem;font-style:italic;font-size:1.8rem;text-indent:5rem;line-height:3rem;text-align:justify;}	
.about > img {width:90%;}
/*hero*/

/*projects*/
.online {display:block;height:100%;width:100%; background-image:url('../img/online.jpg');background-size:100% 100%; background-repeat:no-repeat;transition:all .5s ease-in-out;cursor:pointer;border-radius:10%;}
.programs {display:block;height:100%;width:100%;background-image:url('../img/aplicatii.jpg');background-size:100% 100%; background-repeat:no-repeat;transition:all .5s ease-in-out;cursor:pointer;border-radius:10%;}	
.in-working {display:block;height:100%;width:100%;background-image:url('../img/lucru.jpg');background-size:100% 100%; background-repeat:no-repeat;transition:all .5s ease-in-out;cursor:pointer;border-radius:10%;}
	.bkg {display:block;height:100%;width:100%;position:relative;background-color:rgba(52,73,94,0.6);border-radius:10%;}
	.bkg p {color:yellow;font-size:5rem;position:absolute;top:50%; left:50%; transform:translate(-50%,-50%);text-align:center;}
/*projects*/	
	

/* Slideshow container */
#prs{display:none;}
#pra{display:none;}
#pro{display:none;}

.txt{ display:block;
	margin:3rem;
	height:20rem;
	width:80%;
}
.txt h2{font-size:3.5rem;}
.txt p{font-size:2rem;line-height:2.7rem;}
.btn {text-align:center;}	
.buton { margin:2rem;font-family: sans-serif; font-size: 20px; color: blue;}

.imgs1{ display:inline-block;
	margin:3rem;
	height:20rem;
	width:60%;
	border-radius:10px;
	background-image:url('../img/site.jpg');
	background-size:100% 100%; 
	background-repeat:no-repeat;
	vertical-align:top;
}
.imgs2{ display:inline-block;
	margin:3rem;
	height:20rem;
	width:60%;
	border-radius:10px;
	background-image:url('../img/myphotos.jpg');
	background-size:100% 100%; 
	background-repeat:no-repeat;
	vertical-align:top;
}
.imgs3{ display:inline-block;
	margin:3rem;
	height:20rem;
	width:60%;
	border-radius:10px;
	background-image:url('../img/bootstrapimg.png');
	background-size:100% 100%; 
	background-repeat:no-repeat;
	vertical-align:top;
}
.imgs4{ display:inline-block;
	margin:3rem;
	height:20rem;
	width:60%;
	border-radius:10px;
	background-image:url('../img/garesu.png');
	background-size:100% 100%; 
	background-repeat:no-repeat;
	vertical-align:top;
}
.imgs5{ display:inline-block;
	margin:3rem;
	height:20rem;
	width:60%;
	border-radius:10px;
	background-image:url('../img/aletiatour.jpg');
	background-size:100% 100%; 
	background-repeat:no-repeat;
	vertical-align:top;
}
.imga1{ display:inline-block;
	margin:3rem;
	height:20rem;
	width:60%;
	border-radius:10px;
	background-image:url('../img/bete.png');
	background-size:100% 100%; 
	background-repeat:no-repeat;
	vertical-align:top;
}
.imga2{ display:inline-block;
	margin:3rem;
	height:20rem;
	width:60%;
	border-radius:10px;
	background-image:url('../img/math.png');
	background-size:100% 100%; 
	background-repeat:no-repeat;
	vertical-align:top;
}
.imga3{ display:inline-block;
	margin:3rem;
	height:20rem;
	width:60%;
	border-radius:10px;
	background-image:url('../img/biblioteca_delphi.jpg');
	background-size:100% 100%; 
	background-repeat:no-repeat;
	vertical-align:top;
}
.imga4{ display:inline-block;
	margin:3rem;
	height:20rem;
	width:60%;
	border-radius:10px;
	background-image:url('../img/sticks_delphi.jpg');
	background-size:100% 100%; 
	background-repeat:no-repeat;
	vertical-align:top;
}
.imga5{ display:inline-block;
	margin:3rem;
	height:20rem;
	width:60%;
	border-radius:10px;
	background-image:url('../img/ecuatii_delphi.jpg');
	background-size:100% 100%; 
	background-repeat:no-repeat;
	vertical-align:top;
}
.imga6{ display:inline-block;
	margin:3rem;
	height:20rem;
	width:60%;
	border-radius:10px;
	background-image:url('../img/X0_delphi.jpg');
	background-size:100% 100%; 
	background-repeat:no-repeat;
	vertical-align:top;
}
.imga7{ display:inline-block;
	margin:3rem;
	height:20rem;
	width:60%;
	border-radius:10px;
	background-image:url('../img/biblioteca_C_sharp.jpg');
	background-size:100% 100%; 
	background-repeat:no-repeat;
	vertical-align:top;
}
.imgo1{ display:inline-block;
	margin:3rem;
	height:20rem;
	width:60%;
	border-radius:10px;
	background-image:url('../img/biblioteca.jpg');
	background-size:100% 100%; 
	background-repeat:no-repeat;
	vertical-align:top;
}
.imgo2{ display:inline-block;
	margin:3rem;
	height:20rem;
	width:60%;
	border-radius:10px;
	background-image:url('../img/todolist.png');
	background-size:100% 100%; 
	background-repeat:no-repeat;
	vertical-align:top;
}
.imgo3{ display:inline-block;
	margin:3rem;
	height:20rem;
	width:60%;
	border-radius:10px;
	background-image:url('../img/joc.jpg');
	background-size:100% 100%; 
	background-repeat:no-repeat;
	vertical-align:top;
}
.imgo4{ display:inline-block;
	margin:3rem;
	height:20rem;
	width:60%;
	border-radius:10px;
	background-image:url('../img/keeper.png');
	background-size:100% 100%; 
	background-repeat:no-repeat;
	vertical-align:top;
}
.imgo5{ display:inline-block;
	margin:3rem;
	height:20rem;
	width:60%;
	border-radius:10px;
	background-image:url('../img/weather.png');
	background-size:100% 100%; 
	background-repeat:no-repeat;
	vertical-align:top;
}
.imgo6{ display:inline-block;
	margin:3rem;
	height:20rem;
	width:60%;
	border-radius:10px;
	background-image:url('../img/blog.png');
	background-size:100% 100%; 
	background-repeat:no-repeat;
	vertical-align:top;
}
.slideshow-container {
  width: 99vw;
  position: relative;
  margin: auto; 
}

/* Hide the images by default */
.mySlides1 {
  display: none;
  height:100vh;
  width:100%;
  text-align:center;
  vertical-align:top;
}
.mySlides2 {
  display: none;
  height:100vh;
  width:100%;
  text-align:center;
  vertical-align:top;
}
.mySlides3 {
  display: none;
  height:100vh;
  width:100%;
  text-align:center;
  vertical-align:top;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: black;
  background-color: gray;
  opacity: 0.7;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.prev{left: 0;}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  opacity: 1; 
}


/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
	
/*footer*/
#contact{
	text-align: center;
	text-decoration: none;
	height:auto;
}

.contact-me{
	color:black;
	padding:3% 2%;
}

.final{
	display: flex;
	align-items:center;
	justify-content:center;
	font-size:1.5rem;	
	color:black;
	margin:1.5rem 0;
}	

/*footer*/	

/*responsivenes*/
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default*/



/* Small devices (landscape phones, 576px and up)*/

@media (min-width: 576px)

	{
		.prezentare1 {grid-column-start:3; grid-column-end:7;padding:1rem;height:65rem;}
		.prezentare2 {display:flex; height:65rem;grid-column-start:7; grid-column-end:11;align-items:center;margin-left:2rem;}
		.proiecte1 {height:15rem;grid-column-start:3; grid-column-end:5;border-radius:10%;}
		.proiecte2 {height:15rem;grid-column-start:6; grid-column-end:8;border-radius:10%;}
		.proiecte3 {height:15rem;grid-column-start:9; grid-column-end:11;border-radius:10%;}
		.bkg p {font-size:1.5rem;}
		.mySlides1 {height:100vh;}
		.mySlides2 {height:100vh;}
		.mySlides3 {height:100vh;}
		.imgs1 {display:inline-block;width:30%;}
		.imgs2 {display:inline-block;width:30%;}
		.imgs3 {display:inline-block;width:30%;}
		.imgs4 {display:inline-block;width:30%;}
		.imgs5 {display:inline-block;width:30%;}
		.imga1 {display:inline-block;width:30%;}
		.imga2 {display:inline-block;width:30%;}
		.imga3 {display:inline-block;width:30%;}
		.imga4 {display:inline-block;width:30%;}
		.imga5 {display:inline-block;width:30%;}
		.imga6 {display:inline-block;width:30%;}
		.imga7 {display:inline-block;width:30%;}
		.imgo1 {display:inline-block;width:30%;}
		.imgo2 {display:inline-block;width:30%;}
		.imgo3 {display:inline-block;width:30%;}
		.imgo4 {display:inline-block;width:30%;}
		.imgo5 {display:inline-block;width:30%;}
		.imgo6 {display:inline-block;width:30%;}
		.txt {display:inline-block;width:40%;}		
		.prev{left: 2%;}
		.next{right: 2%;}
	}

/*Small devices (tablets, 768px and up) */ 

@media (min-width:768px) 
	{
		.prezentare1 {height:55rem;}
		.prezentare2 {height:55rem;}
		.proiecte1 {height:20rem;}
		.proiecte2 {height:20rem;}
		.proiecte3 {height:20rem;}
		.bkg p {font-size:3rem;}
		.mySlides1 {height:40vh;}
		.mySlides2 {height:40vh;}
		.mySlides3 {height:40vh;}
		.imgs1 {display:inline-block;width:25%;}
		.imgs2 {display:inline-block;width:25%;}
		.imgs3 {display:inline-block;width:25%;}
		.imgs4 {display:inline-block;width:25%;}
		.imgs5 {display:inline-block;width:25%;}
		.imga1 {display:inline-block;width:25%;}
		.imga2 {display:inline-block;width:25%;}
		.imga3 {display:inline-block;width:25%;}
		.imga4 {display:inline-block;width:25%;}
		.imga5 {display:inline-block;width:25%;}
		.imga6 {display:inline-block;width:25%;}
		.imga7 {display:inline-block;width:25%;}
		.imgo1 {display:inline-block;width:25%;}
		.imgo2 {display:inline-block;width:25%;}
		.imgo3 {display:inline-block;width:25%;}
		.imgo4 {display:inline-block;width:25%;}
		.imgo5 {display:inline-block;width:25%;}
		.imgo6 {display:inline-block;width:25%;}
		.txt {display:inline-block;width:25%;}
		.prev{left: 10%;}
		.next{right: 10%;}
	}  
	
/* Medium devices (desktops, 992px and up) */ 
@media (min-width:992px) 
	{
		.logo > img { height:2.5rem;}
		.burger {display: none;}
		.language {display: none;}
		.language1 {display:inline-block;height:2.7rem;}
		.navigation{display: inline-block;text-align:center;margin-right: 2rem;}
		.navigation > a { display:inline-block;font-size:2.2rem;margin:1rem}
		.proiecte1 {height:25rem;}
		.proiecte2 {height:25rem;}
		.proiecte3 {height:25rem;}
		.prezentareprj1 {height:150rem;grid-column-start:3; grid-column-end:7;padding-left:3rem;}
		.prezentareprj2 {height:150rem;grid-column-start:7; grid-column-end:11;padding-left:3rem;}
		.bkg p {display:none;font-size:4rem;}
		.online:hover {transform:scale(1.1);}
		.programs:hover {transform:scale(1.1);}	
		.in-working:hover {transform:scale(1.1);}
		.bkg:hover p {display:block;}
		.mySlides1 {height:auto;}
		.mySlides2 {height:auto;}
		.mySlides3 {height:auto;}
	} 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width:1200px) 
	{		
		.despre {font-size:2.2rem;line-height:4rem;}
		.proiecte1 {height:30rem;}
		.proiecte2 {height:30rem;}
		.proiecte3 {height:30rem;}
		.bkg p {display:none;font-size:5rem;}
		
	}  
/*responsivenes*/