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

* {box-sizing:border-box;}

body {background-color:powderblue;
/*background-image: url(/img/bg.jpg);*/
background-repeat: no-repeat;
background-size: cover;}


.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.margins
{
	display: inline-block;
	min-width: 5%;
	max-width: 5%;
	height:calc(100vh - 20rem);	
}

.grid { display:inline-block;width:90%;}
	.grid-box { float:left;height:auto;margin:3rem 2.5rem 2.5rem;}
	.box-full { width:calc(100% - 5rem);}
	.box-half { width:calc(100% - 5rem);} 
	.box-third { width:calc(100% - 5rem);} 
	.box-quarter { width:calc(25% - 5rem);}
	
a.anchor { display: block; position: relative; top: -5rem; visibility: hidden;}

/*header*/
header { height:10rem;background-image:url('../img/Camera.png');background-size:100% 100%; background-repeat:no-repeat;}
	.bar {display:flex;width:100%;justify-content:space-between; align-items:center;height:5rem;position:fixed;padding:0.75rem 2.5rem; z-index: 999;background-color:rgba(0,0,0,0.2);}
		.logo { display:inline-block;}
			.logo > img { height:2rem;}
		.language > a > img {display:inline-block;height:2.7rem;}
		.language1 {display:none;}	
		.navigation { display:none;}
		.navigation > a { display:inline-block;color:white; text-decoration:none;margin-right:1.2rem;margin-bottom:1rem;font-size:1.6rem;}
		.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:powderblue;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;}
		}			


/*header*/

/*hero*/
#hero { display:flex;height:80rem;padding-top:2rem;}

	/*first part*/
	.eu {display:block;margin-left:5rem;width:15rem; border-radius:50%;text-align:center;}
	.despre {display:block;margin-top:3rem;margin-left:5rem;font-style:italic;text-indent:5rem;font-size:1.8rem;line-height:3rem;text-align:justify;}
	.about { display:flex;height:10rem;justify-content:center;align-items:center;}
	.buton { height:5rem;width:15rem;font-family: sans-serif; font-size: 2rem; background-color:seashell;color: blue;}
	/*second part*/
	#prezentare2 {display: none; height:60rem;margin-top: 5rem;}
	.media {display:block;text-align: center;height: 20rem;}
	.video { background-image: url("../img/video.png"); background-size: cover; background-repeat: no-repeat; transition: all .5s ease-in-out;}
	.video:hover { transform: scale(1.2);}
	.play {	width: 5rem;}	
	.about2{height:20rem;}
	.detalii { font-size: 1.6rem; line-height:4rem;color: blue;}
		.detalii h2 {font-size: 4rem;line-height:6rem;text-align: center;}
/*hero*/

/*projects*/
#albume { display:flex; height:10rem;}
.albums {width:100%;font-size: 2.2rem;font-style:italic;color:blue;text-align: right;}
		hr {border:1px solid lightskyblue;}
#projects { display:flex; height:auto;}
	.grid-box h1 { text-align:center;font-size:4rem;font-weight:900;}
	.islanda { display:flex;height:20rem; background-image:url('../img/Islanda.jpg');background-size:100% 100%; background-repeat:no-repeat;transition:all .5s ease-in-out;cursor:pointer;border-radius:10%;}
	.flori { display:flex;height:20rem; background-image:url('../img/Flori.jpg');background-size:100% 100%; background-repeat:no-repeat;transition:all .5s ease-in-out;cursor:pointer;border-radius:10%;}
	.peisaje { display:flex;height:20rem; background-image:url('../img/Peisaje.jpg');background-size:100% 100%; background-repeat:no-repeat;transition:all .5s ease-in-out;cursor:pointer;border-radius:10%;}
	.fauna { display:flex;height:20rem; background-image:url('../img/Fauna.jpg');background-size:100% 100%; background-repeat:no-repeat;transition:all .5s ease-in-out;cursor:pointer;border-radius:10%;}
	.rasarit { display:flex;height:20rem; background-image:url('../img/Rasarit.jpg');background-size:100% 100%; background-repeat:no-repeat;transition:all .5s ease-in-out;cursor:pointer;border-radius:10%;}
	.grecia { display:flex;height:20rem; background-image:url('../img/Grecia.jpg');background-size:100% 100%; background-repeat:no-repeat;transition:all .5s ease-in-out;cursor:pointer;border-radius:10%;}
	.austria { display:flex;height:20rem; background-image:url('../img/Austria.jpg');background-size:100% 100%; background-repeat:no-repeat;transition:all .5s ease-in-out;cursor:pointer;border-radius:10%;}
	.germania { display:flex;height:20rem; background-image:url('../img/Germania.jpg');background-size:100% 100%; background-repeat:no-repeat;transition:all .5s ease-in-out;cursor:pointer;border-radius:10%;}
	.elvetia { display:flex;height:20rem; background-image:url('../img/Elvetia.jpg');background-size:100% 100%; background-repeat:no-repeat;transition:all .5s ease-in-out;cursor:pointer;border-radius:10%;}
	.brasov { display:flex;height:20rem; background-image:url('../img/Brasov.jpg');background-size:100% 100%; background-repeat:no-repeat;transition:all .5s ease-in-out;cursor:pointer;border-radius:10%;}
	.sighisoara { display:flex;height:20rem; background-image:url('../img/Sighisoara.jpg');background-size:100% 100%; background-repeat:no-repeat;transition:all .5s ease-in-out;cursor:pointer;border-radius:10%;}
	.targu-mures { display:flex;height:20rem; background-image:url('../img/Targu_Mures.jpg');background-size:100% 100%; background-repeat:no-repeat;transition:all .5s ease-in-out;cursor:pointer;border-radius:10%;}
	.iarna { display:flex;height:20rem; background-image:url('../img/Iarna.jpg');background-size:100% 100%; background-repeat:no-repeat;transition:all .5s ease-in-out;cursor:pointer;border-radius:10%;}
	.nori { display:flex;height:20rem; background-image:url('../img/Nori.jpg');background-size:100% 100%; background-repeat:no-repeat;transition:all .5s ease-in-out;cursor:pointer;border-radius:10%;}
	.diverse { display:flex;height:20rem; background-image:url('../img/Diverse.jpg');background-size:100% 100%; background-repeat:no-repeat;transition:all .5s ease-in-out;cursor:pointer;border-radius:10%;}
	.valea_zanelor { display:flex;height:20rem; background-image:url('../img/Valea_Zanelor.jpg');background-size:100% 100%; background-repeat:no-repeat;transition:all .5s ease-in-out;cursor:pointer;border-radius:10%;}
	/*	.grid-prj { display:block;color:white;font-size:5rem;justify-content:center;align-items:center;position:relative;} /*display:none;*/
		.bkg {display:block;height:100%;width:100%;position:relative;background-color:rgba(52,73,94,0.5);border-radius:10%;}
		.bkg p {position:absolute;color:yellow;color:white;font-size:4rem;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;}
		/*.grid-prj:hover { transform:none;}*/	/*transform:scale(1.1);*/
		/*.bkg:before {content:"";height:100%;width:100%;position:relative;top:0;left:0;background-color:rgba(52,73,94,0.5);border-radius:10%;} */
		/*.grid-prj:hover .bkg:before { display:block;}
		.grid-prj:hover p { display:block;}		*/
/*projects*/

/*footer*/
#footer-set
{
	min-height:5rem;
	max-height:5rem;
	padding: 1.75rem 0;
	min-width: 100%;
	max-width: 100%;
	font-size: 1.5rem;
	background-color:darkgray;
	text-align: center;	
}
/*footer*/

/* media queries */

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


/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (orientation:portrait)
	{
	#hero {height:65rem;}
	.me {height: 30rem;}
	.about {height:65rem;}
	.about2 {height:65rem;}
	#prezentare2 {display: none; height:60rem;}
	.islanda { height:15rem;}
	.flori { height:15rem;}
	.peisaje {height:15rem; }
	.fauna { height:15rem; }
	.rasarit {height:15rem; }
	.grecia { height:15rem;}
	.austria {height:15rem;}
	.germania { height:15rem;}
	.elvetia { height:15rem;}
	.brasov { height:15rem;}
	.sighisoara { height:15rem;}
	.targu-mures {height:15rem; }
	.iarna { height:15rem;}
	.nori { height:15rem;}
	.diverse { height:15rem; }
	.valea_zanelor { height:15rem; }
	.bkg p {font-size:2.5rem;}
	.box-half { width:calc(50% - 5rem);} 
	.box-third { width:calc(33.33% - 5rem);}
	}

@media (min-width:576px) and (orientation:landscape){
	#hero{height: 60rem;}
	#prezentare2{height: 55rem;}
	.islanda { height:15rem;}
	.flori { height:15rem;}
	.peisaje {height:15rem; }
	.fauna { height:15rem; }
	.rasarit {height:15rem; }
	.grecia { height:15rem;}
	.austria {height:15rem;}
	.germania { height:15rem;}
	.elvetia { height:15rem;}
	.brasov { height:15rem;}
	.sighisoara { height:15rem;}
	.targu-mures {height:15rem; }
	.iarna { height:15rem;}
	.nori { height:15rem;}
	.diverse { height:15rem; }
	.valea_zanelor { height:15rem; }
	.box-third { width:calc(33.33% - 5rem);}
	.bkg p {font-size:2rem;}
	}

@media (min-width: 768px) and (orientation:portrait){
	.about2 {height:65rem;}	
		
	}

/*Small devices (tablets, 768px and up) */ 
@media (min-width:768px)  and (orientation:landscape)
	{	
	.logo > img	{height:2rem;}		
	.navigation > a {font-size:2rem; margin-right:2rem;}
	.me {height: 20rem;}
	.despre {font-size:3rem;line-height:4rem;}
	/*.about {height: 20rem;}*/
	.islanda { height:20rem;}
	.flori { height:20rem;}
	.peisaje {height:20rem; }
	.fauna { height:20rem; }
	.rasarit {height:20rem; }
	.grecia { height:20rem;}
	.austria {height:20rem;}
	.germania { height:20rem;}
	.elvetia { height:20rem;}
	.brasov { height:20rem;}
	.sighisoara { height:20rem;}
	.targu-mures {height:20rem; }
	.iarna { height:20rem;}	
	.nori { height:20rem;}	
	.diverse { height:20rem; }
	.valea_zanelor { height:20rem; }
	.bkg p {font-size:4rem;}		
	.box-half { width:calc(50% - 5rem);} 
	.box-third { width:calc(33.33% - 5rem);}
	}  
	
/* Medium devices (desktops, 992px and up) */ 
@media (min-width:992px)
	{
	header{height:25rem;}
	.burger {display: none;}
	.bar {padding:0.75rem 5rem;}
	.logo > img	{height:2.5rem;}	
	.language {display: none;}
	.language1 {display:inline-block;height:2.7rem;}
	.navigation{display: inline-block;text-align:center;margin-right: 2rem;}	
	.navigation > a {font-size:2.2rem; margin-right:1rem;}	
	.despre {font-size:2.4rem;line-height:4rem;}
	#hero {height: 50rem;}
	.about{height: 50rem;}
	.margins {min-width: 10%;max-width: 10%;height:calc(100vh - 25rem);}	
	.grid {width:80%;}	
	.islanda { height:25rem;}
	.flori { height:25rem;}
	.peisaje {height:25rem; }
	.fauna { height:25rem; }
	.rasarit {height:25rem; }
	.grecia { height:25rem;}
	.austria {height:25rem;}
	.germania { height:25rem;}
	.elvetia { height:25rem;}
	.brasov { height:25rem;}
	.sighisoara { height:25rem;}
	.targu-mures {height:25rem; }
	.iarna { height:25rem;}	
	.nori { height:25rem;}	
	.diverse { height:25rem; }
	.valea_zanelor { height:25rem; }
	.grid-prj:hover {transform:scale(1.1);}
	.bkg {display:none;}
	.grid-prj:hover .bkg {display:block;}
	.bkg:hover p {display:block;font-size:4rem;}
	} 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width:1200px) 
	{
	.islanda { height:30rem;}
	.flori { height:30rem;}
	.peisaje {height:30rem; }
	.fauna { height:30rem; }
	.rasarit {height:30rem; }
	.grecia { height:30rem;}
	.austria {height:30rem;}
	.germania { height:30rem;}
	.elvetia { height:30rem;}
	.brasov { height:30rem;}
	.sighisoara { height:30rem;}
	.targu-mures {height:30rem; }
	.iarna { height:30rem;}	
	.nori { height:30rem;}	
	.diverse { height:30rem; }
	.valea_zanelor { height:30rem; }
	}  
/*responsivenes*/